javascript - 当输入新值被传递时，它不会自动影响#np 和#total_amount，直到我刷新网页

Question

当我在选择选项(从字符串更改为值)后更改输入值 (id=input") 时，它不会在#np 和#total_amount 中自动刷新

function myFunction() {
  var x = document.getElementById("work").value;
  console.log(x);
  if (document.getElementById("work").value == "article") {
    var w = 5;
    if (document.getElementById("input")) {
      // renamed x to z 
      var z = document.getElementById("input").value;
      var wc = w * z;
      // not .value but .textContent 
      document.getElementById("total_amount").textContent = +wc;
      document.getElementById("np").textContent = +wc;
    }
  }
}

<div>
  <input type="number" value="0" id="input" name="word_count" value="500" style="text-align: center;" />
  <select id="work" onchange="myFunction();" name="work">
    <option disabled selected> -Select - </option>
    <option value="article">Article
    </option>
  </select>
</div> Total amount:
<span id="total_amount">
 </span> <br /> NP: <span id="np">
 </span>

当我从选项中选择后将新值传递给输入时，我确实希望看到#np 和#total_amount 中的结果发生变化

Answer 1

您有一个分配给 <select> 的事件处理程序元素，但不是 <input>元素。因此，当输入值发生变化时，您的函数不会被调用，您的“total_amount”和“np”值也不会更新。

您需要将事件处理程序附加到 change你的事件<input>标签。我不确定您要如何计算或计算什么，但这是我使用您的代码的意思的示例(查看我在 HTML 部分添加的评论):

function myFunction() {
  var x = document.getElementById("work").value;
  console.log(x);
  if (document.getElementById("work").value == "article") {
    var w = 5;
    if (document.getElementById("input")) {
      var z = document.getElementById("input").value;
      var wc = w * z;
      document.getElementById("total_amount").textContent = +wc;
      document.getElementById("np").textContent = +wc;
    }
  }
}

<div>
  <!-- Added onchange attribute to next line so function gets called when value changes -->
  <!-- Also removed duplicate value attribute -->
  <input type="number" onchange="myFunction()" id="input" name="word_count" value="500" style="text-align: center;" />
  <select id="work" onchange="myFunction();" name="work">
    <option disabled selected> -Select - </option>
    <option value="article">Article
    </option>
  </select>
</div> Total amount:
<span id="total_amount">
 </span> <br /> NP: <span id="np">
 </span>