So erhalten Sie einen Eingabewert in Javascript

Um die vom Benutzer eingegebenen Daten zu verarbeiten, ist es in der Front-End-Entwicklung normalerweise erforderlich, den Eingabewert des Formularelements abzurufen. JavaScript bietet einige Methoden zum Abrufen von Eingabewerten. Werfen wir einen Blick darauf.

1. Rufen Sie den Eingabewert des Textfelds ab.

Das Textfeld ist eines der häufigsten Formularelemente. Sie können das Wertattribut verwenden. Wir können das Textfeldelement über die Methode getElementById abrufen und dann das Wertattribut verwenden, um den eingegebenen Wert abzurufen.

Beispielcode:

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

Im obigen Code definieren wir zunächst ein Textfeldelement, verwenden dann JavaScript, um seinen Eingabewert abzurufen, und geben den Wert schließlich an die Konsole aus.

2. Rufen Sie den Eingabewert des Mehrfachauswahlfelds ab.

Das Mehrfachauswahlfeld wird normalerweise zum Auswählen einer oder mehrerer Optionen verwendet. Wir können den Eingabewert ermitteln, indem wir alle Auswahlen durchlaufen. Wir müssen zuerst alle Optionen des Mehrfachauswahlfelds abrufen, dann alle Optionen durchlaufen und den Status der Optionen über das aktivierte Attribut abrufen.

Beispielcode:

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

Im obigen Code definieren wir zunächst mehrere Mehrfachauswahlfeldelemente und erhalten alle Mehrfachauswahlfeldelemente über die Methode getElementsByClassName. Anschließend erhalten wir den Status jeder Option, indem wir den ausgewählten Optionswert durchlaufen und in einem Array speichern.

3. Ermitteln Sie den Eingabewert des Optionsfelds.

Das Ermitteln des Eingabewerts des Optionsfelds ähnelt dem Mehrfachauswahlfeld. Es erfordert auch das Durchlaufen der Optionsfeldelemente, um den Optionsstatus zu erhalten. Der Unterschied besteht jedoch darin, dass wir mit dem Optionsfeld jeweils nur eine Option auswählen können. Daher können wir normalerweise das Namensattribut verwenden, um die Elemente des Optionsfelds zu gruppieren, was das Durchlaufen aller Optionen erleichtert.

Beispielcode:

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

Im obigen Code definieren wir zunächst mehrere Optionsfeldelemente und gruppieren sie nach dem Namensattribut. Dann erhalten wir den Status der aktuellen Auswahl durch Durchlaufen. Wenn die Option ausgewählt ist, speichern wir ihren Wert in der Variablen „checkedVal“.

Zusammenfassung:

Das Obige ist die Methode zum Abrufen des Eingabewerts des Formularelements. Die Methoden zum Abrufen des Textfelds, des Mehrfachauswahlfelds und des Optionsfelds sind unterschiedlich, sie erhalten jedoch alle den Eingabewert durch Durchlaufen der Elemente und dann den Eingabewert über bestimmte Attribute erhalten. Unabhängig von der Methode ist das Abrufen des Eingabewerts des Formularelements ein notwendiger Schritt bei der Verarbeitung von Benutzereingabedaten.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie einen Eingabewert in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!