文本输入在第一次尝试时不会更改滑块值

Question

我正在制作一个密码生成器，其中包含绑定在一起的文本输入和滑块值，但是当我第一次输入值时，它不会更新。当我再次尝试时，它会起作用，并且随后会起作用。滑块值始终更新。我不知道使它像这样执行的代码有什么问题，对 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;
    })
}

Answer 1

看看 setSlider 函数。在第一次调用时，您将添加事件侦听器。因此，只有在初始调用之后我们才能看到预期的行为。

无需在每次更改时调用 addEventListener，您可以将其全部删除：

function setSlider({value}) {
  slider.value = value; 
  passLength = value;
}

repl

文本输入在第一次尝试时不会更改滑块值

Text input does not change slider value on first attempt

javascript

slider