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.

Scott Marcus · Accepted Answer · 2019-10-29T19:18:08.303

In JavaScript, a single equal sign (=) is for assignment. And, since an assignment will always succeed, true is always hit in your if test.

To compare, use == (compare with conversion) or === (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>

Now, since you are just learning all this, let's kill some bad habits before they solidify. The web is just full of ancient, bad code that just won't die, so some of the techniques you are using no doubt were seen in someone else's code.

First, don't use HTML attributes to set up JavaScript event handling functions. Separate your code and do all the JavaScript in JavaScript, not HTML.

And, rather than set inline styles with the style property, use pre-made CSS classes and apply/remove them at will with the element.classList API.

Lastly, don't use HTML tables for layout. Only use them for displaying tabular data.

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

Thanks very much for all that you have written here. Very much appreciated. Certainly, I would like to discontinue or kill any bad habits before it festers in my code writing. Also, thanks for the nudge (more like a shove, but a good shove.) I will copy the codes you have written and play (experiment) around with it. One question is the addEventListener a must when writing something like this? — Cayllena, Oct 31 '19 at 13:40
@Cayllena You're welcome!`.addEventListener()` is the modern, standards-based way to set up event listeners. It's done within the JavaScript itself, not the HTML. Also, please consider marking this as "the" answer by clicking the checkmark at the top-left of the answer. — Scott Marcus, Oct 31 '19 at 16:03

score 0 · Answer 2 · answered Oct 29 '19 at 19:31

This is basically a skimmed down verison of Scott Marcus's answer. Basically within your if statement, you are comparing the two statements wrong with the = sign. Since you don't want people to give the entire answer, I'll let you research methods of comparing two variables in javascript (and basically most other languages).

If you are really struggling with comparison operators here is a helpful link to figure out which comparison operator you should use:

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

Thanks very much. I was looking at the "=" and was wondering if it matters if its "==" or "===" in this situation. Thanks for the link. I will certainly read the article. — Cayllena, Oct 31 '19 at 13:43

Changing background color based on value of input

2 Answers2