Drucken [Objekt HTMLInputElement] anstelle von Textfeld

Ich habe eine HTML-und Java-Skript-Dateien.Drucken [Objekt HTMLInputElement] anstelle von Textfeld

function saved() { 
 
    
 
    var description; 
 
    description = document.getElemenstByClassName("description").value; 
 
} 
 
function savedd() { 
 
    "use strict"; 
 
    var due_date; 
 
    due_date = document.getElementsByClassName("due_date").value; 
 
} 
 
function saverd() { 
 
    "use strict"; 
 
    var reminder_date = document.getElementsByClassName("reminder_date").value; 
 
} 
 
document.getElementsByClassName("result")[0].innerHTML = description;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="format-detection" content="telephone=no" /> 
 
    <meta name="msapplication-tap-highlight" content="no" /> 
 
    <meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=1, minimum-scale=1, width=device-width" /> 
 
    </head> 
 
    <body> 
 
    <div style="margin:0 auto;text-align:center"> 
 

 
     <!-- Div align in the middle --> 
 
     <div style="margin-left:auto;margin-right:auto;text-align:center"> 
 
      <form> 
 
      Description:<br> 
 
      <input type="text" id="description" onchange="saved()"><br> 
 
       <br> 
 
       <br> 
 
      Due Date:<br> 
 
      <input type="date" id="due_date" onchange="savedd()" ><br> 
 
       <br> 
 
       <br> 
 
      Reminder Date: <br> 
 
      <input type="date" id="reminder_date" onchange="saverd()"><br> 
 
      </form> 
 
     </div> 
 
     <div class="result"> PlaceHolder</div> 
 
</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script type='text/javascript' src="editpage.js"></script> 
 
    </body> 
 
</html>

Problem ist, dass jetzt, wenn sie die Beschreibung drucken kommt, alle es [object Htmlinputelement] druckt ist. Ich möchte sagen, ob es die Informationen korrekt speichert, damit ich es dann in einer separaten Datei speichern kann.

Quelle

2016-08-12 Fencer300

Sie verwenden 'getElemenstByClassName' statt' getElementById' für 'description',' due_date' und 'reminder_date' – blex

Es scheint nicht, wie Sie jemals alles drucken. (Es gibt kein 'console.log'.) Auch Ihre Funktionen tun nichts; Sie speichern etwas in einer lokalen Variablen und beenden es. (Am Ende der Funktion wird die lokale Variable verworfen.) – c0d3rman

'getElementsByClassName' gibt eine Liste von Knoten zurück, nicht ein einzelnes Element. Sie müssen es indizieren, bevor Sie '.value' verwenden können. – Barmar

Diese Zeile:

document.getElementsByClassName("result")[0].innerHTML = description;

ist nicht die Variable description in saved() verwenden. Es greift auf die globale Variable window.description zu. Der Browser erstellt automatisch globale Variablen für jede id im DOM, und der Wert ist dieses Element.

Sie müssen diese Zeile in die changed()-Funktion einfügen, damit sie auf die lokale Variable zugreift. Und Sie müssen document.getElementById() verwenden, um das Element zu finden.

function saved() { 
 
    var description; 
 
    description = document.getElementById("description").value; 
 
    document.getElementsByClassName("result")[0].innerHTML = description; 
 
}

<div style="margin:0 auto;text-align:center"> 
 

 
    <!-- Div align in the middle --> 
 
    <div style="margin-left:auto;margin-right:auto;text-align:center"> 
 
    <form> 
 
     Description: 
 
     <br> 
 
     <input type="text" id="description" onchange="saved()"> 
 
     <br> 
 
     <br> 
 
     <br>Due Date: 
 
     <br> 
 
     <input type="date" id="due_date" onchange="savedd()"> 
 
     <br> 
 
     <br> 
 
     <br>Reminder Date: 
 
     <br> 
 
     <input type="date" id="reminder_date" onchange="saverd()"> 
 
     <br> 
 
    </form> 
 
    </div> 
 
    <div class="result">PlaceHolder</div> 
 
</div>

Quelle

2016-08-12 21:20:35 Barmar

Schätzen Sie die Hilfe! Das behebt das Objekt-HTML-Problem, aber jetzt bleibt es bei PlaceHolder hängen und zeigt nicht an, was in dem Textfeld ist. * EDIT *: Ups, vergessen, etwas Klein zu ändern, und es funktioniert! Danke vielmals! – Fencer300

Ich habe ein ausführbares Snippet hinzugefügt, und es funktioniert. – Barmar

Denken Sie daran, dass das Ereignis 'change' stattfindet, wenn Sie das Eingabefeld verlassen, nicht während Sie tippen. – Barmar

Zuerst description ist nicht im Umfang avaliable, wo Sie den HTML-Code #result. Sekunde ändern, haben Sie einen Fehler gemacht, sind Sie solche Elemente von Klassennamen bekommen, aber nicht nach ID.

var description; 

function saved() { 
    description = document.getElemenstById("description").value; 
} 

function savedd() { 
    "use strict"; 
    var due_date; 
    due_date = document.getElementById("due_date").value; 
} 
function saverd() { 
    "use strict"; 
    var reminder_date = document.getElementById("reminder_date").value; 
} 

document.getElementsByClassName("result")[0].innerHTML = description;

Und Sie bekommen "[object HTMLInputElement]" als Ergebnis, weil globale window.description eine Referenz des #description Element dreht, wenn sich nicht manuell oder nativ definiert ist, aber dies nur in modernen Browsern passiert.

Quelle

2016-08-12 21:21:21 Hydro

Siehe meine Antwort für die Antwort auf Ihre letzte Frage. – Barmar

@Barmar Gute Nachricht – Hydro

Dieses Problem ist eine Kombination aus ein paar Missverständnissen.

Ihre Funktion Funktion saved() deklariert eine lokale Variable description mit dem Schlüsselwort var. Diese Variable ist nur sichtbar innerhalb die Funktion (weil es lokal ist). Sobald die Funktion endet, wird sie weggeworfen.

Als nächstes, wie von Blex darauf hingewiesen, verwenden Sie die Funktion getElemenstByClassName (die falsch geschrieben ist) anstelle von getElementById. Sie müssen Letzteres verwenden, da Sie nach einem Element anhand seiner ID suchen.

Endlich bleibt die Frage, warum ist [object HTMLInputElement] in #result gesetzt? Sie führen die folgende Zeile:

document.getElementsByClassName("result")[0].innerHTML = description;

Wie ich bereits erklärt, description hier nicht auf die description innen saved bezieht sich. Warum wird es ein HTMLInputElement? Wie in der HTML standard (chapter 6.2.4), wenn Sie nie eine Variable namens something definieren, aber versuchen, es zu verwenden, wird der Browser versuchen, nach einem Element mit der ID something suchen.Also über die Linie wirklich wird als

ausgeführt

document.getElementsByClassName("result")[0].innerHTML = document.getElementById("description");

und seit document.getElementById("description") eine HTMLInputElement zurückkehrt, das ist, was Sie sehen.

Also, wie behebst du das? Es gibt mehrere Möglichkeiten, aber am ähnlichsten zu dem, was Sie getan haben, ist sicherzustellen, dass Ihre Variablen am Ende der Funktion nicht weggeworfen werden. Das würde ungefähr so aussehen:

var description; 
function saved() { 
    description = document.getElementById("description").value; 
} 
document.getElementById("result").innerHTML = description;

Mit analogen Änderungen an Ihrer anderen Funktion. Dies ist nicht der einfachste oder üblichste Weg, um dies zu tun, aber ich bin mir sicher, dass meine Mitbenutzer mit denen übereinstimmen werden.

Beachten Sie, dass das einmalige Aufrufen von document.getElementById("result").innerHTML = description; am Ende Ihrer JS-Datei bedeutet, dass diese Zeile nur einmal ausgeführt wird. das heißt, wenn die Seite geladen wird, wird der Inhalt von result auf die Beschreibung der leeren Variablen gesetzt, und dann wird sie sich nie wieder ändern. Vielleicht sollte das auch eine Funktion sein, die in einem Element onchange geht.

Quelle

2016-08-12 21:21:47 c0d3rman

Nicht nur "in vielen Browsern". Es wird von der HTML-Spezifikation benötigt. – Barmar

Siehe http://stackoverflow.com/questions/5515659/javascript-variable-corresponds-to-dom-element-with-the-same-id – Barmar

Vielen Dank! Bearbeitet. – c0d3rman

Sie haben einige Fehler im Code:

Sie haben Tippfehler in Funktionsnamen "getElemenstByClassName" sollte "getElementsByClassName" sein.
Sie suchen nach Eingabe # Beschreibung mit Funktion, die Element nach Klassenname "getElemenstByClassName" sucht, sollten Sie stattdessen getElementById oder querySelector verwenden. Lesen Sie hier mehr http://javascript.info/tutorial/searching-elements-dom.
Ihre Variable "description" ist lokal für die gespeicherte Funktion(). Auf diese Variable kann nicht außerhalb der Funktion zugegriffen werden. Lesen Sie hier mehr http://www.w3schools.com/js/js_scope.asp. Hier

arbeitet Beispiel https://jsfiddle.net/9dzqr3pm/

function saved() { 
     var description = document.querySelector("#description").value; 
     document.querySelector(".result").innerHTML = description; 
    }

Quelle

2016-08-12 21:34:14 gauss

Drucken [Objekt HTMLInputElement] anstelle von Textfeld

Antwort

Verwandte Themen