How to properly use = and == operators in JavaScript?

Question

Problem

I have a table with 2 rows and 3 columns, the third column is where results are displayed.

My goal is to make the code to display 25% in the first row if (the difference between x and y is greater than 3 but less than 11).

And display 25% in the second row if (w + z > 3) is true and display 20% if (w + y = 3) is true.

How do I solve this issue?

Attempt

<!DOCTYPE html>
<html>
</head>

<BODY>
  <script>
    document.addEventListener("change", function() {
      var x = document.getElementById("hp").value,
        y = document.getElementById("ap").value,
        w = document.getElementById("hc").value,
        z = document.getElementById("ac").value,
        text;
      if (x - y > 3 && y - x < 11) {
        text = "<span class='green'>25%</span>";
      } else if (y - x > 3 && x - y < 11) {
        text = "<span class='green'>25%</span>";
      } else {
        text = "<span class='red'>10%</span>";
      }
      document.getElementById("pr").innerHTML = text;

      if (w + z > 3) {
        text = "<span class='green'>25%</span>";
      } else if (w + z = 3) {
        text = "<span class='green'>20%</span>";
      } else {
        text = "<span class='red'>10%</span>";
      }
      document.getElementById("cr").innerHTML = text;
    })
  </script>
  <style>
      .green {
      color: green;
    }
    
    .red {
      color: red;
    }
    
    .yellow {
      color: yellow
  </style>

  <TABLE align="center" BORDER="1" WIDTH="" CELLPADDING="4" CELLSPACING="3">
    <TR>

      <TD id="">
        <p>HOMEPOSITION:</p>
        <input type="number" id="hp">
      </TD>
      <TD id="">
        <p>AWAYPOSITION:</p>
        <input type="number" id="ap">
      </TD>
      <TD id="pr"></TD>
    </TR>
    <TR>
      <TD id="">
        <p>HOMECAST:</p>
        <input type="number" id="hc">
      </TD>
      <TD type="number" id="">
        <p>AWAYCAST:</p>
        <input type="number" id="ac">
      </TD>
      <TD id="cr"></TD>
    </TR>


  </TABLE>

</html>

`w + z = 3` use `==` to check for equality. `=` means assignment — VLAZ, Mar 23 '19 at 12:22
I just want to point you to html mistakes in this code. You need to open head tag, and close body tag. On the following link [link](https://www.lifewire.com/html-singleton-tags-3468620) is example of singleton or void elements, that doesn't need to close. — dd_, Jun 03 '19 at 00:03

score 0 · Answer 1 · answered Mar 23 '19 at 12:58

It seems to be a problem with an operator (= vs ==):

Code

<!DOCTYPE html>
<html>
  <head>
    <style>
        .green {
        color: green;
      }
      
      .red {
        color: red;
      }
      
      .yellow {
        color: yellow
    </style>
  </head>

  <BODY>
    <TABLE align="center" BORDER="1" WIDTH="" CELLPADDING="4" CELLSPACING="3">
      <TR>

        <TD id="">
          <p>HOMEPOSITION:</p>
          <input type="number" id="hp">
        </TD>
        <TD id="">
          <p>AWAYPOSITION:</p>
          <input type="number" id="ap">
        </TD>
        <TD id="pr"></TD>
      </TR>
      <TR>
        <TD id="">
          <p>HOMECAST:</p>
          <input type="number" id="hc">
        </TD>
        <TD type="number" id="">
          <p>AWAYCAST:</p>
          <input type="number" id="ac">
        </TD>
        <TD id="cr"></TD>
      </TR>
    </TABLE>
    <script>
      document.addEventListener("change", function() {
        var x = document.getElementById("hp").value,
          y = document.getElementById("ap").value,
          w = document.getElementById("hc").value,
          z = document.getElementById("ac").value,
          text;
        if (x - y > 3 && y - x < 11) {
          text = "<span class='green'>25%</span>";
        } else if (y - x > 3 && x - y < 11) {
          text = "<span class='green'>25%</span>";
        } else {
          text = "<span class='red'>10%</span>";
        }
        document.getElementById("pr").innerHTML = text;

        if (w + z > 3) {
          text = "<span class='green'>25%</span>";
        } else if (w + z == 3) {
          text = "<span class='green'>20%</span>";
        } else {
          text = "<span class='red'>10%</span>";
        }
        document.getElementById("cr").innerHTML = text;
      })
    </script>
  </BODY>
</html>

How to properly use = and == operators in JavaScript?

Problem

Attempt

1 Answers1

Code