Estoy creando un generador de contraseñas con una entrada de texto y un valor deslizante que están vinculados, sin embargo, cuando escribo un valor la primera vez, no se actualizará. Cuando lo intento de nuevo, funciona, así como las veces posteriores. El valor del control deslizante siempre se actualiza. Sin embargo, no sé qué tiene de malo el código para que funcione así, todavía es bastante nuevo para JS.
//html
<div class="slider"> <input type="text" id="slider-input" value="" onchange="setSlider(this)"> <input type="range" min="1" max="64" value="1" id="slider" oninput="myFunction(this)"> </div>//JS
const sliderInput = document.getElementById("slider-input"); const slider = document.getElementById("slider"); let passLength = ""; function myFunction() { slider.oninput = function() { sliderInput.value = this.value; passLength = this.value; } } function setSlider() { sliderInput.addEventListener("change", function() { slider.value = this.value; passLength = this.value; }) }Eche un vistazo a la función setSlider . En la primera invocación, está agregando el detector de eventos. Por lo tanto, es solo después de esa llamada inicial que vemos el comportamiento previsto.
En lugar de llamar a addEventListener en cada cambio, puede eliminarlo todo junto:
function setSlider({value}) { slider.value = value; passLength = value; }