嵌套的addEventListeners，阻塞输入Javascript

Question

我正在尝试制作一个根据两个输入显示输出的表单。

不幸的是，计数不成比例，所以我在case中使用了几个if。

我有一张尺寸和物品数量的表格。即：如果你选择两个85x200尺寸的物品，你需要支付570zł。

我不知道为什么，但现在看来我已经阻止了我的选择中的两个最后选项。我只能选择第一个，如果我选择第二个或第三个，我仍然计算第一个的值。

代码：

document.addEventListener("DOMContentLoaded", function() {
  "use strict";
  let amount = document.getElementById('amount');
  let size = document.getElementById('size');
  let spanPrice = document.getElementById('output');

  amount.addEventListener('input', function(e) {
    const prices = document.querySelectorAll("td.price");
    let pricesArray = [...prices];
    size.addEventListener('change', function(e) {
      function count() {

        if (size.value = "85x200") {
          if (amount.value <= 10) {
            return amount.value * pricesArray[0].innerHTML.slice(0, -6);
          } else if (amount.value <= 30) {
            return amount.value * pricesArray[1].innerHTML.slice(0, -6);
          } else if (amount.value <= 50) {
            return amount.value * pricesArray[2].innerHTML.slice(0, -6);
          } else {
            return amount.value * pricesArray[3].innerHTML.slice(0, -6);
          }
        } else if (size.value = "100x200") {
          if (amount.value <= 10) {
            return amount.value * pricesArray[4].innerHTML.slice(0, -6);

          } else if (amount.value <= 30) {
            return amount.value * pricesArray[5].innerHTML.slice(0, -6);
          } else if (amount.value <= 50) {
            return amount.value * pricesArray[6].innerHTML.slice(0, -6);
          } else {
            return amount.value * pricesArray[7].innerHTML.slice(0, -6);
          }
        } else {
          if (amount.value <= 10) {
            return amount.value * pricesArray[8].innerHTML.slice(0, -6);

          } else if (amount.value <= 30) {
            return amount.value * pricesArray[9].innerHTML.slice(0, -6);

          } else if (amount.value <= 50) {
            return amount.value * pricesArray[10].innerHTML.slice(0, -6);

          } else {
            return amount.value * pricesArray[11].innerHTML.slice(0, -6);

          }
        }
      }

      count();
      let result = count();
      spanPrice.innerHTML = result;
    })
  });
});

<main>
  <section id="content">
    <h2>Roll-upy</h2>
    <table>
      <thead>
        <tr>
          <th>wymiary</th>
          <th>1 - 10 sztuk</th>
          <th>11 - 30 sztuk</th>
          <th>31 - 50 sztuk</th>
          <th>powyżej 50 sztuk</th>
        </tr>
      </thead>
      <tbody>
        <tr class="85x200">
          <td>85 cm x 200 cm</td>
          <td class="price one-ten" id="one">285,00 zł</td>
          <td class="price eleven-thirty" id="two">239,00 zł</td>
          <td class="price thirtyone-fifty" id="three">229,00 zł</td>
          <td class="price above-fifty" id="four">205,00 zł</td>
        </tr>
        <tr class="100x200">
          <td>100 cm x 200 cm</td>
          <td class="price one-ten" id="five">329,00 zł</td>
          <td class="price eleven-thirty" id="six">275,00 zł</td>
          <td class="price thirtyone-fifty" id="seven">245,00 zł</td>
          <td class="price above-fifty" id="eight">234,00 zł</td>
        </tr>
        <tr class="120x200">
          <td>120 cm x 200 cm</td>
          <td class="price one-ten" id="nine">359,00 zł</td>
          <td class="price eleven-thirty" id="ten">319,00 zł</td>
          <td class="price thirtyone-fifty" id="eleven">299,00 zł</td>
          <td class="price above-fifty" id="twelve">245,00 zł</td>
        </tr>
      </tbody>
    </table>
    <form action="" method="post">
      <label for="amount">Podaj ilość sztuk:</label>
      <input name="amount" id="amount" type="number" min="1" value="0" step="1"><br><br>
      <label for="size">Podaj wymiary:</label>
      <select name="size" id="size">
                <option>Kliknij, aby wybrać</option>
                <option value="85x200">85cm x 200 cm</option>
                <option value="100x200">100cm x 200 cm</option>
                <option value="120x200">120cm x 200 cm</option>
              </select>
      <p>Cena:&nbsp;<span id="output"></span><span>&nbsp;zł</span></p>
      <input type="submit" id="submit" name="submit" value="Dodaj">
    </form>
  </section>
</main>

这是问题的代码：

https://codepen.io/wiktoriatomzik/pen/mpxJMg

Answer 1

问题在于您的if声明。您已使用=代替==来比较事物。 =用于分配，这意味着当您有这样的内容时：if (size.value = "85x200")您实际上正在分配size元素的值，而不是将其与字符串进行比较。

只需将（和所有类似的陈述）更改为：if (size.value == "85x200")

Answer 2

您的if条件中存在拼写错误。要使它工作，只需替换以下行：

• if (size.value = "85x200")至if (size.value == "85x200")
• if (size.value = "100x200")至if (size.value == "100x200")