Mit JavaScript möchte der Ausgabewert eines Bereichsschiebereglers mit mehreren Schiebereglern im Formular automatisch aktualisiert werden.

Question

Ich hätte gerne 1 Skript mit mehreren IDs. Das folgende Beispiel funktioniert gut mit dem Ausgabefeld für die Farb-ID, aber wie kann ich die ID an das Skript übergeben, sodass ich anstelle von #paint die ID verwenden kann, die für die Funktion gesendet wurde?

in Kopf

function outputUpdate(num) { 
    document.querySelector('#paint').value = num; 
    } 

in Form

<fieldset> 
    <legend><h3>Paint/Body</h3></legend> 
    <output for="paint" id="paint">0</output> 
    <input id="paint" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(value)"> 
</fieldset> 
<fieldset> 
    <legend><h3>Wheels</h3></legend> 
    <output for="wheels" id="wheels">0</output> 
    <input id="wheels" type="range" min="0" max="5" value="0" step="1" list="0-5" oninput="outputUpdate(value)"> 
</fieldset> 
<fieldset> 
    <legend><h3>Body Mods</h3></legend> 
    <output for="bodymods" id="bodymods">0</output> 
    <input id="bodymods" type="range" min="0" max="15" value="0" step="1" list="0-15" oninput="outputUpdate(value)"> 
</fieldset> 
<fieldset> 
    <legend><h3>Engine</h3></legend> 
    <output for="engine" id="engine">0</output> 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(value)"> 
    Closed: <input type="checkbox" name="engine-closed" value="0" /> 
</fieldset> 

mögen so etwas verwenden:

function outputUpdate(id, num) { 
    document.querySelector(id).value = num; 
    } 

Answer 1

Versuchen ( diese )

function outputUpdate(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
    }

<fieldset> 
 
    <legend><h3>Paint/Body</h3></legend> 
 
    <output for="paint" id="paint">0</output> 
 
    <input id="paint" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
</fieldset> 
 
<fieldset> 
 
    <legend><h3>Wheels</h3></legend> 
 
    <output for="wheels" id="wheels">0</output> 
 
    <input id="wheels" type="range" min="0" max="5" value="0" step="1" list="0-5" oninput="outputUpdate(this)"> 
 
</fieldset>

Answer 2

Aktualisieren Sie Ihre Javascript-Funktion einen zweiten Parameter

zu akzeptieren

Und nennen Sie diese von Ihrem HTML-Code wie

<input id="paint" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(value, 'paint')"> 

<input id="wheels" type="range" min="0" max="5" value="0" step="1" list="0-5" oninput="outputUpdate(value, 'wheels')"> 

usw.