JavaScript können Text-Box-Wert

Question

Wenn ich diesen Code ausführen, bekomme ich diesen Fehler in der Konsole lesen

nicht Eigenschaft ‚Wert‘ von null

Wie Sie das lesen sehen txt1 und txt2 Werte sind nicht null und das Javascript ist mit dem HTML-Code verknüpft, ich habe es mit einer Audiodatei getestet.

var audio = new Audio('sound/saw.mp3'); 
 
var min=0; 
 
min=document.getElementById('txt1').value; 
 
var max=0; 
 
max=document.getElementById('txt2').value;

<label id="lbl1" for="txt1">lowest number </label> 
 
<input id="txt1" type="text" class="enjoy" value="0"> 
 

 
<label id="lbl2" for="txt2">highest number </label> 
 
<input id="txt2" type="text" class="enjoy" value="100" /> 
 

Answer 1

Dieses Problem höchstwahrscheinlich ein Timing ist. Javascript kann Knoten erst finden, wenn sie in das Dom geladen wurden. Wickeln Sie einfach Ihre JS in einer window.onload() Funktion:

window.onload = function(){ 
    var audio = new Audio('sound/saw.mp3'); 
    var min=0; 
    min=document.getElementById('txt1').value; 
    var max=0; 
    max=document.getElementById('txt2').value; 
} 

, die sicherstellen, dass die Knoten vorhanden ist, bevor Sie versuchen, auf sie zuzugreifen. Sie können, dass ein wenig mehr über hier lesen: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Answer 2

ein fehlender ist/im Tag:

Sollte sein:

Wenn Sie den Inhalt eines wollen Tag, den Sie verwenden müssen:

document.getElementById ("txt1"). innerHTML

, wenn Sie einen Attributwert wollen, müssen Sie

document.getElementById ("txt1") verwenden getAttribute ("value")

Wenn Sie den Wert eines Textfeldes Verwendung zugreifen möchten.

document.getElementById ("txt1"). Wert

Wie auch immer verwenden Sie JQuery zum Navigieren im DOM, es ist viel einfacher als die DOM-API.