多个滑块在代码中重复我自己

Question

我的代码有点乱。 在参数选项卡中有三个滑块，将来可能会有更多滑块。

 let slider1 = document.getElementById("hello_interval_input");
 let output1 = document.getElementById("demo1");
 output1.innerHTML = slider1.value;

        slider1.oninput = function() {
            output1.innerHTML = this.value;
        };

let slider2 = document.getElementById("hello_loss_input");
let output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

        slider2.oninput = function() {
              output2.innerHTML = this.value;
        };

let slider3 = document.getElementById("hello_routeTimeout_input");
let output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

        slider3.oninput = function() {
            output3.innerHTML = this.value;
        };

问题 如何避免重复自己并编写此清洁器？

更新 我已经尝试了 for each 循环的解决方案，但后来我遇到了值不会随着滑块的运动而更新的问题。 相反，当我放开滑块时，它们会更新。

Answer 1

document.querySelectorAll(".input").forEach( el => el.addEventListener('change', ( event) => {
    document.getElementById(el.dataset.dest).innerHTML = el.value;
}));

<input type="text" class="input" data-dest="output1">
<input type="text" class="input" data-dest="output2">
<input type="text" class="input" data-dest="output3">

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

你可以像这样创建它