Fehler bei der ausgabe HTML & JS?
Bei folgendem Code gibt es nicht den eingegebenen Text aus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einkaufsliste</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
body{
background-color: rgb(0, 83, 238);
font-family: 'Noto Serif', serif;
}
.content{
background-color: white;
width: 600px;
margin-left: 660px;
margin-right: 660px;
margin-top: 20px;
}
.content h1{
text-align: center;
font-size: 60px;
}
.content form{
padding-left: 125px;
width: 200px;
}
</style>
</head>
<body>
<div class="content">
<h1>Einkaufsliste</h1>
<!-- Simple Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="liste1">
<label class="mdl-textfield__label" for="liste1">Produkt</label>
</div>
<button onclick="subFunc()" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
<p><var liste></var></p>
</button>
</form>
<script>
function subFunc(){
var liste = document.getElementById('liste1')
document.write(liste)
}
</script>
</div>
</body>
</html>
2 Antworten
Zuerst ein paar Hinweise zu Fehlern in deinem Markup:
1) Der Paragraph gehört nicht in einen Button. Nimm ein span-Element stattdessen oder einfach gar nichts.
<button ...>
<i class="material-icons">add</i>
<span><var></var></span>
</button>
Anschließend könnte man eigentlich noch den Sinn des Elements selbst hinterfragen, da es keinen Textinhalt hat.
2) Es gibt kein Attribut liste für das var-Element.
Zu deinem Problem:
Du holst dir nur das HTML Element, nicht aber den Wert seines value-Attributs, an dem du ja eigentlich interessiert bist.
So wäre es richtig:
var liste = document.getElementById('liste1').value;
Bzw. besser:
const product = document.getElementById('liste1').value;
Da du den Wert nicht nachträglich verändern möchtest, kann er auch als konstant markiert werden. Und eine Liste beinhaltet der Wert ja auch nicht, wenn ich mir die Labelbeschriftung einmal anschaue. Da wäre die Bezeichnung product wohl passender.
Dir sollte des Weiteren klar sein, dass du mit:
document.write(liste)
das Dokument komplett überschreibst. Besser wäre es, sich ein HTML-Element für die Ausgabe anzulegen und in dieses den Wert zu schreiben.
HTML-Element:
<p id="output"></p>
JavaScript:
document.getElementById("output").innerText = product;
PS.: Wenn ein Formular beim Absenden an dieselbe Adresse leiten soll, lasse das action-Attribut einfach weg. Der Wert wird intern korrekt gesetzt.
kurze frage
var liste = document.getElementById('liste1')
document.write(liste)
gibt genau das was du möchtest auch aus , nämlich das objekt
[object HTMLInputElement]
oder wolltest du den Wert ?
ja dann musst du auch den wert nehmen und nicht das objekt .
such dir ein vernünftiges tutorial .
ich möchte das es das ausgibt was man eingibt