如何使用动态 select 表单更改 HTML 和 JavaScript 中的样式？

Question

我是新手，刚开始学习 JS 课程，想在作业中玩得开心，但也许有点超前了。我决定对蒙蒂的《死亡之桥》进行简单的再创作 Python

我正在尝试在 HTML 文件中使用 JS 创建下拉菜单，然后当某个选项被 select 编辑时，它会更改段落元素的颜色。

我不确定如何提取在 select 表单中创建的选项的值来设置元素的样式。我现在创建的是下拉菜单，但选项不会改变任何东西

抱歉，如果这太卡了，我一周前就开始了。

这是代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>The Bridge of Death!!!</title>
  <meta charset="UTF-8">
</head>

<body>
  <h1>You Approach the Bridge of Death</h1>
  <button id="q1button" onclick="q1_func()">Talk to Tim </button>
  <p id="question_1"></p>
  <p id="response_1"></p>

  <script>
    function q1_func() {
      const name = prompt("What is your Name", "Arthur, King of the Britains");
      if (name != null) {
        document.getElementById("question_1").innerHTML = "What is Your Name?";
        document.getElementById("response_1").innerHTML = "My name is " + name;
        document.getElementById("q1button").remove();
        q2_func();
      }
    }
  </script>
  <p id="question_2"></p>
  <p id="response_2"></p>
  <script>
    function q2_func() {
      var quest = prompt("What is your Quest", "To seek the Holy Grail!");
      if (quest != null) {
        document.getElementById("question_2").innerHTML = "What is Your Quest?";
        document.getElementById("response_2").innerHTML = quest;
        q3_func();
      }
    }
  </script>
  <p id="question_3"></p>
  <p id="response_3"></p>
  <script>
    function changeBackground(colors) {
      var val = list.options[list.selectedIndex].values;
      document.p.style.backgroundColor = val;
    }
  </script>
  <script>
    function q3_func() {
      var values = [" ", "blue", "red", "pink", "blue...no..."];
      var select = document.createElement("select");
      select.name = "colors";
      select.id = "colors";
      select.onchange = "changeBackground(this)";

      for (const val of values) {
        var option = document.createElement("option");
        option.values = val;
        option.text = val.charAt(0).toUpperCase() + val.slice(1);
        select.appendChild(option);
      }

      var label = document.createElement("label");
      label.innerHTML = "What is you favorite color?";
      label.htmlFor = "color";

      document.getElementById("question_3").appendChild(label).appendChild(select);
      document.getElementById("q2_button").remove();
      if (value === "blue...no...") {
        alert("Ahhhhh!!!!! *Death* ");
      };
    }
  </script>
</body>

</html>

我觉得有更好的方法来创建 select 表单。我也可以使用 html 创建它，然后在 q2_func.

中隐藏然后显示它

关于从这里我可以去哪里有什么建议吗？基于作业的一些限制：js 或 css 没有单独的文件，只需使用 js 更改样式（无 jquery 或 ajax）

此外，“蓝色...不...”应该会导致警报，但这也不起作用...

提前致谢！ -凯文

Answer 1

这是您的代码解决方案。

如果你想添加 onchange 函数你需要使用 setAttribute 函数在 q3_func().
您没有在 changeBackground 函数中定义任何要在您获取颜色参数的函数事件中使用的可验证列表，您可以使用 colors.options 和 colors.selectIndex
您不能直接使用 document.p 因为 p 未定义为可验证的或者它不是文档但它是文档的一部分。您可以使用 document.getElementsByTagName('p')[0] [0] 索引标签。 例如：

您在正文中使用 p 标签 5 次 [0] 表示第一个 p 标签，[1] 表示第二次。

<!DOCTYPE html>
            <html lang="en">

            <head>
            <title>The Bridge of Death!!!</title>
            <meta charset="UTF-8">
            </head>

            <body>
             <h1>You Approach the Bridge of Death</h1>
             <button id="q1button" onclick="q1_func()">Talk to Tim </button>
              <p id="question_1"></p>
             <p id="response_1"></p>

            <script>
            function q1_func() {
              const name = prompt("What is your Name", "Arthur, King of the Britains");
              if (name != null) {
                document.getElementById("question_1").innerHTML = "What is Your Name?";
                document.getElementById("response_1").innerHTML = "My name is " + name;
                document.getElementById("q1button").remove();
                q2_func();
              }
            }
           </script>
            <p id="question_2"></p>
            <p id="response_2"></p>

            <script>
            function q2_func() {
              var quest = prompt("What is your Quest", "To seek the Holy Grail!");
              if (quest != null) {
                document.getElementById("question_2").innerHTML = "What is Your Quest?";
                document.getElementById("response_2").innerHTML = quest;
                q3_func();
              }
            }
          </script>

            <p id="question_3"></p>
            <p id="response_3"></p>
             <script>
              function changeBackground(colors) {
              var val = colors.options[colors.selectedIndex].values;
              document.getElementsByTagName('p')[0].style.backgroundColor = val;
            }
          </script>

             <script>
                function q3_func() {
              var values = [" ", "blue", "red", "pink", "blue...no..."];
              var select = document.createElement("select");
              select.name = "colors";
              select.id = "colors";
              select.setAttribute("onchange", "changeBackground(this)");

              for (const val of values) {
                var option = document.createElement("option");
                option.values = val;
                option.text = val.charAt(0).toUpperCase() + val.slice(1);
                select.appendChild(option);
              }

              var label = document.createElement("label");
              label.innerHTML = "What is you favorite color?";
              label.htmlFor = "color";

              document.getElementById("question_3").appendChild(label).appendChild(select);
              document.getElementById("q2_button").remove();
              if (value === "blue...no...") {
                alert("Ahhhhh!!!!! *Death* ");
               };
              }
              </script>
            </body>

        </html>

希望你明白这一点。

Answer 2

我找到警报触发器了！使用 Abdul 所做的更改，我将以下代码添加到 changeBackground 函数的末尾：

var x = document.getElementById("colors").selectedIndex;
var y = document.getElementById("colors").options;
if (y[x].index === 4){
alert("Ahhhhgggg!!! .... *Death*");
};

现在完全可以使用了。谢谢

凯文

如何使用动态 select 表单更改 HTML 和 JavaScript 中的样式？

How can I use a dynamic select form to change style in HTML and JavaScript?

javascript

html

forms

select

onchange