How to display input value on the website? I already tried to display it but when I change the value of the input, the display is still the same.
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>Provided that the <p> element for the value will always be following directly after your range element then the following script will take care of any number of range/value combinations:
document.querySelectorAll(".range")
.forEach(r=>r.addEventListener("input",update(r)));
function update(r){
const ur= ()=>r.nextElementSibling.textContent=r.value;
ur();
return ur;
}<input type="range" min="1" max="100" value="40" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="20" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="30" step="1" class="range"/>
<p></p>What you did puts the value of the input in the paragraphe on load. Plus you need an EventListener in order to track the input changes, like so:
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>const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
rangeInput.addEventListener("input", () => {
valueInp.textContent = rangeInput.value;
});
valueInp.textContent = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>```