JavaScript”;示例“;切换以比较HTML按钮id's

JavaScript "example" of a switch to compare HTML button id's

本文关键字:按钮 HTML id 比较 示例 JavaScript      更新时间:2023-09-26

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

    "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次才能改变风格。有什么原因吗?注:"现在已固定"

除此之外,我希望这能帮助其他人。-Rob

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

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

你最初试图将颜色设置为黑色,但你习惯了许多"="符号。将该行更改为:

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

你的代码就可以工作了!