javascript - Changing background color based on value of input

Question

First, thanks in advance for any helpful replies. Second, I am just starting to learn javascript, so please excuse any awkwardness in the code writing. My overall objective is to create a quiz, that when the user clicked the answer button, the background color of each answer will indicate if it is correct (green) or wrong (red). However, I don't want anyone giving me the answer (how else will I learn), rather nudge me in the right direction in the hope I figure it out myself.

At this point, I am able to change the background color of a cell in a table with a click of the button. However, I got stuck when I added an input type="radio." It was not responding the way I hope it would.

Here is my code:

<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> 

What I want to happen is the system looks at the input sees that the value='T'. It would suppose to turn the background to yellow. In the condition, I purposely made it 'F' to see if the system goes through it and reads (it does not.) Obviously I am missing something. I have a feeling that I am not hitting the input right. I looked around for discussions on input[value] and I saw some but there were not much explanation on it.

标签： javascript

Answer 1

在 JavaScript 中，一个等号 ( =) 用于赋值。而且，由于分配总是会成功，所以总是会在你的测试true中被击中。if

要进行比较，请使用==(compare with conversion) 或===(compare without conversion)。

<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>

现在，既然你只是在学习这一切，让我们在一些坏习惯固化之前把它们改掉。网络上到处都是古老的、糟糕的代码，它们不会死，所以你使用的一些技术无疑是在别人的代码中看到的。

首先，不要使用 HTML 属性来设置 JavaScript 事件处理函数。分离您的代码并在 JavaScript 中执行所有 JavaScript，而不是 HTML。

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

最后，不要使用 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>