javascript - 如何在 Javascript 页面上显示输入值？

Question

如何在网站上显示输入值？我已经尝试显示它，但是当我更改输入的值时，显示仍然相同。

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");

valueInp.innerHTML = rangeInput.value;

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

Answer 1

您所做的是将段落中的输入值加载。另外，您需要一个 EventListener 来跟踪输入更改，如下所示:

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
rangeInput.addEventListener("input", ()=>{
 valueInp.innerHTML = rangeInput.value;
})

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>