当输入新值传递时，它不会影响 #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"值。

您需要将事件处理程序附加到<input>标记的change事件。我不确定您要如何计算或计算什么，但这里有一个我使用您的代码的意思示例(查看我在 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>