Wie man Eingabewerte in JavaScript erhält

  1. Verwenden Sie document.getElementById(id_name), um den Eingabewert in JavaScript zu erhalten
  2. Verwenden Sie document.getElementsByClassName('class_name'), um den Eingabewert in JavaScript zu erhalten
  3. Verwenden Sie document.querySelector('selector'), um den Eingabewert in JavaScript zu erhalten
Wie man Eingabewerte in JavaScript erhält

Wir können den Wert der Eingabe erhalten, ohne sie in ein Formular-Element in JavaScript einzuhüllen, indem wir das DOM-Eingabe-Element auswählen und die Eigenschaft value verwenden.

ADVERTISEMENT

JavaScript hat verschiedene Methoden zur Auswahl des DOM-Eingabeelements. Jede Methode unten hat ein Codebeispiel, das Sie auf Ihrem Rechner ausführen können.

Verwenden Sie document.getElementById(id_name), um den Eingabewert in JavaScript zu erhalten

Wir geben unserem Dom-Eingabeelement die Eigenschaft id und verwenden dann document.getElementById(id_name), um das DOM-Eingabeelement auszuwählen, Sie können einfach die Eigenschaft value verwenden.

Beispiel:

HTML
 htmlCopy<!DOCTYPE html> 
<html> 
  
<body> 
  
  <h4> 
      Change the text of the text field  
      ,and then click the button. 
  </h4> 
  
  <label for="domTextElement">Name: </label>
  <input type="text" id="domTextElement" > 
  
  <button type="button"  onclick="getValueInput()"> 
      click me!! 
  </button> 
  
  <p id="valueInput"></p> 

  <script> 

    const getValueInput = () =>{
      let inputValue = document.getElementById("domTextElement").value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }
    
  </script> 
</body> 
  
</html> 

Verwenden Sie document.getElementsByClassName('class_name'), um den Eingabewert in JavaScript zu erhalten

Wir geben die Klasseneigenschaft an unser Dom-Eingabeelement und verwenden dann document.getElementsByClassName('class_name'), um das DOM-Eingabeelement auszuwählen, aber wenn wir verschiedene Dom-Eingabeelemente mit demselben Klassennamen haben, dann wird ein Array von Dom-Eingaben zurückgegeben, also sollten wir angeben, welches wir auswählen, indem wir die Indexnummer angeben: document.getElementsByClassName('class_name')[index_number].value.

Beispiel:

HTML
 htmlCopy<!DOCTYPE html> 
<html> 
  
<body> 
  
  <h4> 
      Change the text of the text field  
      ,and then click the button. 
  </h4> 
  
 <input type="text" class="domTextElement" > 
  
  <label for="domTextElement">Name: </label>
  <input type="text" class="domTextElement" > 
  
  <button type="button"  onclick="getValueInput()"> 
      click me!! 
  </button> 
  
  <p id="valueInput"></p> 

  <script> 

    const getValueInput = () =>{
      let inputValue = document.getElementsByClassName("domTextElement")[1].value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }
    
  </script> 
</body> 
  
</html> 

Verwenden Sie document.querySelector('selector'), um den Eingabewert in JavaScript zu erhalten

Der document.querySelector('selector') verwendet CSS-Selektoren, d.h. er kann Elemente nach id, Klasse, Tag-Name und name property des DOM-Elements auswählen.

Beispiel:

JavaScript
 javascriptCopydocument.querySelector('class_name')
document.querySelector('id_name')
document.querySelector('input')                    // tag name
document.querySelector('[name="domTextElement"]')  // name property

Beispiel:

HTML
 htmlCopy<!DOCTYPE html> 
<html> 
  
<body> 
  
  <h4> 
      Change the text of the text field  
      ,and then click the button. 
  </h4> 
  
 <input type="text" id="domTextElement1" > 
  
  <label for="domTextElement">Name: </label>
  <input type="text" class="domTextElement2" > 
  
  <button type="button"  onclick="getValueInput()"> 
      click me!! 
  </button> 
  
  <p id="valueInput"></p> 

  <script> 

    const getValueInput = () =>{
      let inputValue1 = document.querySelector("#domTextElement1").value; 
      let inputValue2 = document.querySelector(".domTextElement2").value; 
      document.querySelector("#valueInput").innerHTML = `First input value: ${inputValue1} Second Input Value: ${inputValue2}`; 
    }
    
  </script> 
</body> 
  
</html> 
Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren

Verwandter Artikel - JavaScript Input