javascript 中的用户输入每次都需要重新加载页面以更改值

Question

我建立了一个网站，该网站从用户编号中获取并通过单击按钮执行特定的数学运算，例如用户键入“100”并单击 15% 按钮，该应用程序将在控制台日志中打印 15 现在用户将输入字段中的先前值更改为“80”，然后按相同的按钮 15%，它应该打印“12”，但不，它仍然是相同的结果“15”，如果我想要结果，我需要重新加载页面，我怎么能每次用户更改 javascript 中的输入值时都会更改结果，这里有更多详细信息的简单代码：

HTML:

<input type="number" id="ID">
<button id="Button">15%</button>

JAVASCRIPT:

const input= document.getElementById("ID");
const button = document.getElementById("Button");
button.addEventListener('click', ()=>{
 const operation = input.value * 0.15;
 console.log(operation);
});

Answer 1

您没有从内存堆栈中重置输入值，因此当您尝试调用变量值时，您的程序会使用该变量的第一个存储值。尝试在事件侦听器函数中实例化您的输入变量，以便每次调用此操作时您实际上都在变量中获取新值。

    <div id="result"></div>
    <input type="number" id="ID">
<button id="Button">15%</button>


const button = document.getElementById("Button");
button.addEventListener('click', ()=>{
 const input= document.getElementById("ID");
 const operation = input.value * 0.15;
 console.log(operation);
 document.getElementById("result").innerHTML=`${operation}`;
});

javascript 中的用户输入每次都需要重新加载页面以更改值

user input in javascript need to reloade the page every time for change the value

javascript

html

input

user-input