JS Funktion mehrfach

BimBiwakBier · 27. Januar 2020

Hallo zusammen,

ich bin relativ neu in der Webentwicklung und beschäftige mich gerade mit den Grundzügen von JS. Ich möchte für meine Webseite zwei Range-Felder untereinander erstellen, die über ein oninput-Event sofort das Ergebnis am Ende ausgeben. Dies klappt bei der ersten Berechnung schon ganz gut, allerdings habe ich meine Probleme, dies auch auf die zweite Berechnung zu übertragen. Kann mir hier jemand helfen?

Vielen Dank schon mal und liebe Grüße

M.

<!DOCTYPE html>

<html>

<body>

<form oninput=myRange(parseInt(a.value),parseInt(b.value));>

0<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" id="xfield" for="a b"></output>

</form>

<br>

<form oninput=myRange(parseInt(c.value),parseInt(d.value));>

0<input type="range" id="c" value="25">100

+<input type="number" id="d" value="25">

=<output name="x" id="xfield" for="c d"></output>

</form>

</body>

<script>

function myRange(a1,a2) {

var x = document.getElementById("xfield")

x.value = a1 + a2;

}

</script>

</html>

Sempervivum · 27. Januar 2020

Du hast da zwei Elemente mit der ID "xfield". Für den Anfang ist es wahrscheinlich am einfachsten, wenn Du die IDs eindeutig machst und an die Funktion myRange() übergibst:

Code

<form oninput=myRange(parseInt(a.value),parseInt(b.value), "xfield1");>

0<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" id="xfield1" for="a b"></output>

</form>

<br>

<form oninput=myRange(parseInt(c.value),parseInt(d.value), "xfield2");>

0<input type="range" id="c" value="25">100

+<input type="number" id="d" value="25">

=<output name="x" id="xfield2" for="c d"></output>

</form>



</body>

<script>

function myRange(a1, a2, idout) {

var x = document.getElementById(idout);

x.value = a1 + a2;

}

</script>

Alles anzeigen

Arne Drews · 28. Januar 2020

Als Alternative:

Ich würde auf unnötiges HTML-Gedöns verzichten und eine Form daraus machen, bspw.:

HTML

<form name="calc">
    <fieldset>
        0<input type="range" value="50">100
        +<input type="number" value="50">
        =<output></output>
    </fieldset>
    <fieldset>
        0<input type="range" value="25">100
        +<input type="number" value="25">
        =<output></output>
    </fieldset>
</form>

Alles anzeigen

Das reicht vollkommen, um per JS damit zu arbeiten. Das JS mag auf den ersten Blick etwas komplizierter ausschauen, aber dafür bietet es eine hohe Skalierbarkeit:

JavaScript

var _inputElements = document.querySelectorAll( '[name="calc"] [type="range"], [name="calc"] [type="number"]' );

for ( idx=0; idx<_inputElements.length; idx++ ) {

    _inputElements[idx].addEventListener( 'change', function(e) {

        _sum = 0;
        _fieldSet = this.closest('fieldset');
        Array.prototype.slice.call( _fieldSet.querySelectorAll(':scope input') ).forEach( i => { _sum += parseInt(i.value); });

        _fieldSet.querySelector( ':scope output' ).value = _sum;
    });
}

Alles anzeigen

Der Hauptvorteil ist der, dass ich im HTML nun beliebig viele <fieldset> mit gleichem aufbau zufügen kann, das JS braucht nicht angepasst zu werden, es funktioniert bei beliebig vielen, ohne dass ich irgendwelche Parameter übergeben muss o.ä.

Soll aber nur als Vorschlag und weiterer Möglichkeit dienen.

BimBiwakBier · 14. April 2020

Zitat von Sempervivum

Du hast da zwei Elemente mit der ID "xfield". Für den Anfang ist es wahrscheinlich am einfachsten, wenn Du die IDs eindeutig machst und an die Funktion myRange() übergibst:

Code

<form oninput=myRange(parseInt(a.value),parseInt(b.value), "xfield1");>

0<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" id="xfield1" for="a b"></output>

</form>

<br>

<form oninput=myRange(parseInt(c.value),parseInt(d.value), "xfield2");>

0<input type="range" id="c" value="25">100

+<input type="number" id="d" value="25">

=<output name="x" id="xfield2" for="c d"></output>

</form>



</body>

<script>

function myRange(a1, a2, idout) {

var x = document.getElementById(idout);

x.value = a1 + a2;

}

</script>

Alles anzeigen

Super! Vielen Dank! Das hat mir echt geholfen

Ich hätte hier noch eine zweite Frage: Ich möchte, dass die beiden beiden Berechnungen nicht erst bei oninput gestartet werden, sondern auch automatisch als onload im body beim Laden der Website. Dies funktioniert auch, wenn ich beide entsprechend in den body-Tag aufnehme:

<body onload=myRange(parseInt(a.value),parseInt(b.value), "xfield1")

onload=myRange(parseInt(c.value),parseInt(d.value), "xfield2")>

Allerdings ist das sehr aufwändig, wenn noch mehr Felder hinzukommen. Wie würde ich das am Sinnvollsten lösen, wenn eine entsprechende Funktion zusätzlich im body als onload-Event gestartet werden soll?

Danke schon mal.

Beste Grüße

Markus

Sempervivum · 14. April 2020

Am einfachsten, wenn Du die beteiligten IDs in ein zweidimensionale Array einträgst und darüber eine Schleife legst. In der Schleife dann die Funktion myRange aufrufen mit den IDs als Parameter.

Alternative: Die drei beteiligten Elemente jeweils z. B. in einem Fieldset gruppieren. Dann eine Schleife über diese Fieldsets und jeweils die Berechnung durchführen.

JS Funktion mehrfach

Jetzt mitmachen!

Teilen