多個滑塊在代碼中重復我自己

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 循環的解決方案，但后來我遇到了值不會隨着 slider 的運動而更新的問題。 相反，當我讓 slider go 時，它們會更新。

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>

你可以像這樣創建它