javascript - 在javascript中制作一个改变颜色的按钮的问题

Question

我想制作一个遗漏的单词游戏，你必须从几个单词中选择正确的遗漏单词。例如。“太阳 _____。”A.闪耀B.闪耀C.闪耀。

之后应该有一个按钮，如果正确则将缺失单词的颜色更改为绿色，如果错误则更改为红色。

我尝试过做 if else 语句，但我认为我还不够好

function myFunction() {
  if (document.getElementById("demo") = "shines") {
    document.getElementById("demo").style.color = "green";
  } else {
    document.getElementById("demo").style.color = "red";
  }
}

<p>1. The Sun
  <select>
    <option id="demo" value="shine">shine</option>
    <option id="demo" value="shining">shining</option>
    <option id="demo" value="shines">shines</option>
  </select>
</p><button onclick="myFunction()">Check!</button>

我怎样才能让它发挥作用？

Answer 1

这里有几个问题:

1. 你的 if语句是赋值而不是相等

   这有 1 =签名

   if (document.getElementById("demo").value = "shines")
   

   应该是这样的:

   if (document.getElementById("demo").value == "shines")
   

2. 你不应该创建多个具有相同 id ( demo in你的情况)。我想你想给 <select/>元素id 而不是 <option/> ？

3. 您可能需要检查:

   document.getElementById("demo").value
   

这是一个可以帮助您继续前进的运行代码:

function myFunction() {
  if (document.getElementById("demo").value == "shines") {
    document.getElementById("demo").style.color = "green";
  } else {
    document.getElementById("demo").style.color = "red";
  }
}

<p>1. The Sun
  <select id="demo">
    <option value="shine">shine</option>
    <option value="shining">shining</option>
    <option value="shines">shines</option>
  </select>
</p><button onclick="myFunction()">Check!</button>