使用Javascript，我无法使onchange函数中的IF语句正确启动

使用Javascript，我试图在对

select

下拉菜单进行更改时启动一个函数

HTML是：

<select id="select" onchange="characterchange()">
  <option value="spidey">Spider-Man
  <option value="panther">Black Panther
</select>

<div id="Spidey">
  <h2 style="color: red">Spider-Man</h2>
    ...
    ...
</div>

<div id="Panther">
  <h2 style="color: black">Panther</h2>
  ...
  ...
</div>

当进行任何更改时，我将获取

被解雇的角色更改

，

角色

，

选定的蜘蛛

，以及

选定的黑豹

的日志。CSS没有被更改，代码后面的日志也没有被触发。我错过了什么

编辑：对

=

进行更改将触发正确的if语句，但是，我的函数在

选择的蜘蛛“

或

选择的黑豹”

后停止

if（character=“Spider Man”）

转化为

if（“蜘蛛侠”）//此时字符变量将具有@Teemu正确指出的“蜘蛛侠”值

由于，总是转换为

if（true）

你的意思是

---

if（character==“Spider Man”）//=（比较）not=（赋值）

请检查此正在运行的更新代码。

首先，应该在if条件中设置==符号

然后在if条件内更改该值

函数字符更改（）{
console.log（“被激发的字符更改”）；
var character=document.getElementById（“选择”）.value；
如果（字符==“蜘蛛侠”）{
控制台日志（“选定蜘蛛”）；
document.getElementById（“Spidey”）.style.display=“inline”；
document.getElementById（“Panther”）.style.display=“无”；
控制台日志（“显示蜘蛛”）；
}
如果（字符==“黑豹”）{
控制台日志（“选定的黑豹”）；
document.getElementById（“Spidey”）.style.display=“无”；
document.getElementById（“Panther”）.style.display=“inline”；
控制台日志（“显示黑豹”）；
}
}

蜘蛛侠
黑豹
蜘蛛侠
黑豹

不确定目标是什么，但基本上都错了。正如其他人所暗示的，=是assignemnt，而==或==检查是否相等

下一步是：

 var character = document.getElementById("select").value;

在这里，您将获得select的值。然后在下面，您将与元素的文本值进行比较。所以不是

   if (character = "Spider-Man") {

做：

以下是全文：

       <script>
    function characterchange() {
      console.log("fired characterchange");

      var character = document.getElementById("select").value;
      console.log(character);

      if (character == "spidey") {
        console.log("selected spidey");
        document.getElementById("Spidey").style.display = "block";
        document.getElementById("Panther").style.display = "none";
        console.log("showing Spidey");
      }
      if (character == "panther") {
        console.log("selected panther");
        document.getElementById("Spidey").style.display = "none";
        document.getElementById("Panther").style.display = "block";
        console.log("showing Panther");
      }
    }

    </script>

函数characterchange（）{
console.log（“被激发的字符更改”）；
var character=document.getElementById（“选择”）.value；
console.log（字符）；
如果（字符==“蜘蛛侠”）{
控制台日志（“选定蜘蛛”）；
document.getElementById（“Spidey”）.style.display=“block”；
document.getElementById（“Panther”）.style.display=“无”；
控制台日志（“显示蜘蛛”）；
}
如果（字符==“黑豹”）{
控制台日志（“选定的黑豹”）；
document.getElementById（“Spidey”）.style.display=“无”；
document.getElementById（“Panther”）.style.display=“block”；
控制台日志（“显示黑豹”）；
}
}

以及HTML：

    <select id="select" onchange="characterchange()">
          <option value="spidey">Spider-Man
          <option value="panther">Black Panther
        </select>

        <div id="Spidey">
          <h2 style="color: red">Spider-Man</h2>
            ...
            ...
        </div>

        <div id="Panther">
          <h2 style="color: black">Panther</h2>
          ...
          ...
        </div>

蜘蛛侠
黑豹
蜘蛛侠
...
...
黑豹
...
...

您的意思是使用

==

而不是

=

。前者表示相等，后者表示赋值。^或者您可以使用

==

。请阅读：@elclanrs这样做会触发正确的if语句，但是，我的函数在

“selected spidey”

或

“selected panther”

之后停止，这一点不值得一提，作为副作用，“蜘蛛侠”也被分配给

字符。
       <script>
    function characterchange() {
      console.log("fired characterchange");

      var character = document.getElementById("select").value;
      console.log(character);

      if (character == "spidey") {
        console.log("selected spidey");
        document.getElementById("Spidey").style.display = "block";
        document.getElementById("Panther").style.display = "none";
        console.log("showing Spidey");
      }
      if (character == "panther") {
        console.log("selected panther");
        document.getElementById("Spidey").style.display = "none";
        document.getElementById("Panther").style.display = "block";
        console.log("showing Panther");
      }
    }

    </script>

    <select id="select" onchange="characterchange()">
          <option value="spidey">Spider-Man
          <option value="panther">Black Panther
        </select>

        <div id="Spidey">
          <h2 style="color: red">Spider-Man</h2>
            ...
            ...
        </div>

        <div id="Panther">
          <h2 style="color: black">Panther</h2>
          ...
          ...
        </div>