用于比较 HTML 按钮 ID 的开关的 JavaScript“示例”答案

【问题标题】：JavaScript "example" of a switch to compare HTML button id's用于比较 HTML 按钮 ID 的开关的 JavaScript“示例”
【发布时间】：2023-12-13 03:57:02
【问题描述】：

我在一周前发布了一个关于如何使用 JavaScript switch 语句来比较 this.id 的问题。我发现很难将我的函数/对象方法作为变量从开关中取出。使用严格模式并尝试这样做似乎是不可能的。不过我确实找到了一种方法来获得我想要的结果。

    "use strict"

    function fragmentLoader() {
      getID(this.id);
    }

    function getID(x) {
      var theID = x;

      switch (theID) {
        case "myFirstID":
          myDate();

          break;

        case "mySecondID":
          changeStyle();

          break;

        case "myThirdID":
          myText();

          break;

        default:
          otpt = "ERROR!";
      }

    }

    function myDate() {
      document.getElementById('content').innerHTML = Date();
    }

    function changeStyle() {
      
         var whatColor = document.getElementById("content").style.color;
      
      if ( whatColor === "black") {
        document.getElementById("content").style.color = "blue";
      } else {
        document.getElementById("content").style.color = "black";
      }

    }

    function myText() {
      document.getElementById('content').innerHTML = "This Text will display";
    }
    document.getElementById("content").style.color = "black";
    document.querySelector('#myFirstID').addEventListener('click', fragmentLoader);
    document.querySelector('#mySecondID').addEventListener('click', fragmentLoader);
    document.querySelector('#myThirdID').addEventListener('click', fragmentLoader);

    <div>
      <div>
        <button id="myFirstID">
          Press for Date and Time.
        </button>
      </div>

      <div>
        <button id="mySecondID">
          Press to change style color.
        </button>
      </div>

      <div>
        <button id="myThirdID">
          Press for Text.
        </button>
      </div>

      <p id="content">content here

      </p>
    </div>

不得不嘲笑我的示例，因为出于某种奇怪的原因，需要单击 2 次才能更改样式。关于为什么的任何想法？注意：“现在已修复”

除此之外，我希望这对其他人有所帮助。 -罗伯

【问题讨论】：

对 document.getElementById("content").style.color 的初始调用；没有返回“黑色”。然后它将颜色设置为黑色，在第二次按下时它是“黑色”并将颜色设置为“蓝色”。
感谢您的解释。

标签： javascript button switch-statement this

【解决方案1】：

这一行是您的代码无法按预期工作的原因：

document.getElementById("content").style.color === "black";

您最初尝试将颜色设置为黑色，但您习惯了许多“=”符号。将该行更改为：

document.getElementById("content").style.color = "black";

...您的代码将起作用！

【讨论】：