¿Cómo mostrar el valor de entrada en el sitio web? Ya intenté mostrarlo, pero cuando cambio el valor de la entrada, la pantalla sigue siendo la misma.
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>Siempre que el elemento <p> para el valor siempre siga directamente después de su elemento de rango, la siguiente secuencia de comandos se encargará de cualquier cantidad de combinaciones de rango/valor:
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>Lo que hiciste pone en carga el valor de la entrada en el párrafo. Además, necesita un EventListener para rastrear los cambios de entrada, así:
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>```