如何获取不同ElementId的动态Javascript代码，以使用range-slider.value更改element.value

Question

I created dynamically a HTML-Form and changed the value in Form-Elements with Javascript. How can I also create the Javascript code dynamic? Or is there a better way to code in Javascript that every range and input element I create depend upon each other?

I thought about changing elements by classes but it doesn't works (maybe wrong coded?). And I was not sure if it works, because I have more than one Volume-input element (and pressure element). They will be created for different objects in the CMS. I 'display: block/none;' them.

HTML-Code would look Like:

<form>
<label for="(dynamicID)">Volume</label>
<input type="number" class="text-center" id="(dynamicID)">
<input id="slide-(dynamicID)" type="range" class="slider" min="1" max="10" step="1"/>
</form>

Javascript to change the Value of the Input element when slider's input change (and also the other way round) looks Like:

var sliders = document.getElementById("slide-(dynamicID)");
var outputs = document.getElementById("(dynamicID)");
outputs.value = sliders.value;
sliders.oninput = function() {
 outputs.value = this.value;
}
outputs.oninput = function() {
  sliders.value = this.value;
}

That works Perfectly when I code it statically. I can code the HTML-Elements with my CMS dynamic.

I also will take any other advice. Thanks in advance.

Answer 1

 function setValue(e){ let sliders = document.getElementsByClassName("dynamicInput"); Array.prototype.forEach.call(sliders,(slider)=>{ slider.value = e.target.value }) } let sliders = document.getElementsByClassName("dynamicInput"); Array.prototype.forEach.call(sliders,(slider)=>{ slider.oninput = setValue; }); 

 <form> <label for="(dynamicID)">Volume</label> <input type="number" class="text-center dynamicInput" id="(dynamicID)"> <input id="slide-(dynamicID)" type="range" class="slider dynamicInput" min="1" max="10" step="1"/> </form> 

this is a bit mroe dynamic it works for all elements that have "dynamicInput" in the className and implment a .value setter