Unable Eingang DOM-Element der Wert

ich habe folgende html/JS-Code zu lesen:Unable Eingang DOM-Element der Wert

function controller() 
{ 
    document.write(document.getElementById("name").value) ; 
    document.write(document.getElementById("id").value) ; 
}

<input type="text" id="name"/> 
<input type="text" id="id"/> 
<input type="button" id="push" onclick="controller()"/>

Problem: wenn ich auf Push klicken onclick wird ausgelöst und controller Funktion ausgeführt wird, und ich bin in der Lage Wert des Elements abzurufen ID id nicht gelesen hat ID name aber das zweite Element, und als Ergebnis i das folgende Fehlerelement zum zweiten Eingang erhalten:

Uncaught TypeError: Cannot read property 'value' of null

Ich habe seit Stunden gekämpft, aber ich kann nicht verstehen, wo ich Fehler mache kann jemand helfen?

Quelle

2016-07-21 user3442701

nicht verwenden 'document.write' – epascarello

Erste' document.write' Aufruf wird den gesamten DOM-Baum als Ergebnis Ihres bevorstehendes Element sucht ungültig löschen/ersetzen. –

Ihr Skript lesen Sie die Eingänge Werte korrekt, aber wenn die erste document.write Anweisung ausgeführt wird es den Körper so außer Kraft setzen, wenn das Skript versuchen, das zweite auszuführen es keinen Eingang finden, und gibt die Fehlerzeile:

Uncaught TypeError: Cannot read property 'value' of null

Hoffe das hilft.

function controller() 
 
{ 
 
    console.log(document.getElementById("name").value); 
 
    console.log(document.getElementById("id").value); 
 
}

<input type="text" id="name"/> 
 
<input type="text" id="id"/> 
 
<input type="button" id="push" onclick="controller()"/>

Quelle

2016-07-21 15:08:49

Das Problem ist, dass document.write die Seite "löscht". Die Eingabe ist nicht mehr auf der Seite, nach der ersten document.write

Detaillierte Informationen finden Sie auf der MDN unter diesem Link https://developer.mozilla.org/en-US/docs/Web/API/Document/write

in dem es heißt zu finden:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document

alert() versuchen stattdessen oder console.info() oder andere Funktionen, die das Dokument nicht löschen.

function controller() 
 
{ 
 
    alert(document.getElementById("name").value) ; 
 
    alert(document.getElementById("id").value) ; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <meta charset="ISO-8859-1"> 
 
      <title>Insert title here</title> 
 
     </head> 
 
     <body> 
 
      <input type="text" id="name"/> 
 
      <input type="text" id="id"/> 
 
      <input type="button" id="push" onclick="controller()"/> 
 
     </body> 
 
    </html>

tested on Win7 with chrome 51+

Optional:

Wenn Sie wollen/müssen document.write verwenden, lesen Sie zuerst alle Werte und dass sie auf das Dokument schreiben.

function controller() 
 
{ 
 
    var firstField = document.getElementById("name").value; 
 
    var secondField = document.getElementById("id").value; 
 
    document.write(firstField); 
 
    document.write(secondField); 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <meta charset="ISO-8859-1"> 
 
      <title>Insert title here</title> 
 
     </head> 
 
     <body> 
 
      <input type="text" id="name"/> 
 
      <input type="text" id="id"/> 
 
      <input type="button" id="push" onclick="controller()"/> 
 
     </body> 
 
    </html>

tested on Win7 with chrome 51+

Info: Der bessere Weg Ereignisse zu befestigen ist, sie über einen Eventlistener zu befestigen ist hier ein Link auf die addEventListener Referenz https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Quelle

2016-07-21 15:08:47

das Problem ist, dass document.write den Körper löscht Sie stattdessen 'alert()' verwenden können, oder ein anderes Element in den dom und legen Sie seine innerHTML- auf die Werte:

function controller(){ 
    alert(document.getElementById("name").value) ; 
    alert(document.getElementById("id").value) ; 
}

<input type="text" id="name"/> 
<input type="text" id="id"/> 
<input type="button" id="push" onclick="controller()"/> 
<div id="result"></div>

JavaScrip t

var ele=document.querySelector("#result"); 
function controller(){ 
    ele.innerHTML="Name :"+document.getElementById("name").value+"<br>Id: "+document.getElementById("id").value; 
}

Quelle

2016-07-21 15:17:03

document.write(document.getElementById("name").value); ist Ihre gesamte dom ersetzt, so dass die nachfolgende getElementById nicht den Eingangswert abzurufen. Speichern Sie alle Werte, bevor Sie sie zurück in das Dokument schreiben.

function controller(){ 
    var store = []; 
    store.push(document.getElementById("name").value); 
    store.push(document.getElementById("name2").value); 
    document.open(); 
    document.write(store); 
    document.close(); 
}

Quelle

2016-07-21 15:23:40 Tyler

Antwort

Verwandte Themen