Как правильно использовать операторы = и == в JavaScript? - PullRequest
0 голосов
/ 23 марта 2019

Проблема

У меня есть таблица с 2 строками и 3 столбцами, в третьем столбце отображаются результаты.

Моя цель - заставить код отображать 25% в первомстрока if (разница между x и y больше 3, но меньше 11).

И отображение 25% во втором ряду if (w + z > 3) - это истина, а отображение 20% if (w + y = 3) - это истина.

Как мне решить эту проблему?

Попытка

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

1 Ответ

0 голосов
/ 23 марта 2019

Кажется, проблема с оператором (= против ==):

Код

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