Question

首先，在此先感谢您的帮助。其次，我刚刚开始学习javascript，因此请原谅代码编写中的任何尴尬之处。我的总体目标是创建一个测验，即当用户单击答案按钮时，每个答案的背景颜色将指示它是正确的（绿色）还是错误的（红色）。但是，我不想让任何人给我答案（我将如何学习），而是朝着正确的方向轻推我，希望自己自己弄清楚。

这时，我可以通过单击按钮来更改table中单元格的背景颜色。但是，当我添加input type =“ radio”时，我陷入了困境。它没有以我希望的方式响应。

这是我的代码：

<table>
    <tr>
      <td><input id="yy" type="radio" value="T"></td>
      <td id="pdd">True answer.</td>
      <td></td>
    </tr>
  </table>
  <button onclick="tst()">Show Answer</button>

<script>
function tst() {
  var y = document.getElementById('pdd');
  var z = document.getElementById('yy');
  if (z.value = 'F') {
    y.style.backgroundColor = 'red';
  } else {
    y.style.backgroundColor = 'yellow';
  }
}
</script>

我要发生的是系统在输入中看到值='T'。它将把背景变成黄色。在这种情况下，我故意将其设置为“ F”，以查看系统是否通过它并读取（不是）。显然我缺少了一些东西。我感觉自己没有正确输入。我四处寻找有关输入[值]的讨论，我看到了一些，但是对此没有太多解释。

Answer 1

在JavaScript中，单个等号（=）用于分配。并且，由于分配总是成功的，因此true总是会在您的if测试中被击中。

要进行比较，请使用==（与转换比较）或===（与未转换比较）。

<table>
        <tr>
          <td><input id="yy" type="radio" value="T"></td>
          <td id="pdd">True answer.</td>
          <td></td>
        </tr>
      </table>
      <button onclick="tst()">Show Answer</button>
    
    <script>
    function tst() {
      var y = document.getElementById('pdd');
      var z = document.getElementById('yy');
      if (z.value === 'F') {
        y.style.backgroundColor = 'red';
      } else {
        y.style.backgroundColor = 'yellow';
      }
    }
    </script>

现在，由于您只是在学习所有这些知识，因此让我们先消除一些不良习惯，然后再加以巩固。网络上充斥着古老的，糟糕的代码，这些代码不会死，因此，毫无疑问，您正在使用的某些技术可以在其他人的代码中看到。

首先，don't use HTML attributes to set up JavaScript event handling functions。分隔您的代码，并使用JavaScript（而不是HTML）使用所有JavaScript。

而且，与其使用style属性设置内联样式，不如使用预制的CSS类并使用element.classList API随意应用/删除它们。

最后，请勿使用HTML表格进行布局。仅将它们用于显示表格数据。

.red { background-color:red; } 
.yellow { background-color:yellow; }

<div>
    <input id="yy" type="radio" value="T">
    <span id="pdd">True answer.</span>
<div>
<button>Show Answer</button>
    
    <script>
      let btn = document.querySelector("button");
      btn.addEventListener("click", tst);
    
      function tst() {
        var y = document.getElementById('pdd');
        var z = document.getElementById('yy');
        if (z.value === 'F') {
          y.classList.add("red");
        } else {
          y.classList.add("yellow");
        }
      }
    </script>

Answer 2

基本上，这是斯科特·马库斯（Scott Marcus）回答的简要概述。基本上在您的if语句中，您将两个错误的带有=符号的语句进行比较。由于您不希望人们给出完整的答案，因此，我将让您研究比较javascript（基本上是大多数其他语言）中两个变量的方法。

如果您真的在比较运算符方面苦苦挣扎，这里是一个有用的链接，用于指出您应该使用哪个比较运算符：

Which equals operator (== vs ===) should be used in JavaScript comparisons?

根据输入值更改背景色

2 个答案: