Textfelder mit Button auswerten

**Poldi** · 02-12-2020, 20:56

Moin, ich habe auf meiner Internetseite ein normales Textfeld. Ich möchte den Wert der dort eingetragen wird auslesen und dann mit einem von mir festgelegten string vergleichen. stimmen es über ein soll true rauskommen. es kommt aber immer flase raus und ich hab keine ahnung warum.

Quellcode:

HTML-Code:

<html>
    <body>
        <div class="formitem">
            <label><input placeholder="Text eingeben und Auslesen" type="text"  id="vorname"></label>
            <label><button id="textfeld" type="button"> Auslesen </button></label>
        </div>
        <div class="textfeld-msg"></div>
    
    <script>
    document.querySelector('#textfeld').onclick = function () {
        document.querySelector('.textfeld-msg').innerHTML = document.querySelector("#vorname").value;
    }
    //---------------------------------------------------------------------------------------
var textinput = "Poldi";
var poldi = document.querySelector("#vorname").value;
    document.addEventListener('DOMContentLoaded', buttonHandler);
function buttonHandler(){
 var btn = document.querySelector("#textfeld");
 btn.addEventListener("mouseup", handler);
 function handler(event){

 if(event.type == "mouseup" && textinput == poldi ){
	  alert("true");
  } else {alert("false");}
 }
 }
    </script>
    </body>
</html>

Ich freue mich über alle Antworten:-)

**mikdoe** · 03-12-2020, 10:54

Gegenfrage: wann wird der Interpreter poldi definieren? Beim Laden des Codes oder beim Klick auf die Schaltfläche?

Bei solchen Problemen immer mit Zwischenausgaben mittels console.log() arbeiten.
Und dringend an den Einrückungen arbeiten, dass da optische Struktur rein kommt. Das hilft.

Bei mir sieht dein Code so aus und da sehe ich sofort anhand der Einrückungen den Grund für das unerwartete Verhalten.

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<meta charset="utf-8">
	</head>

	<body>
		<div class="formitem">
			<label><input placeholder="Text eingeben und Auslesen" type="text" id="vorname"></label>
			<label><button id="textfeld" type="button"> Auslesen </button></label>
		</div>
		<div class="textfeld-msg"></div>

		<script>
			document.querySelector('#textfeld').onclick = function () {
				document.querySelector('.textfeld-msg').innerHTML = document.querySelector("#vorname").value;
			};

			//---------------------------------------------------------------------------------------

			var textinput = "Poldi";
			var poldi = document.querySelector("#vorname").value;
			document.addEventListener('DOMContentLoaded', buttonHandler);

			function buttonHandler(){
				var btn = document.querySelector("#textfeld");
				btn.addEventListener("mouseup", handler);
				function handler(event){
console.log('textinput: '+textinput);
console.log('poldi: '+poldi);
					if(event.type == "mouseup" && textinput == poldi ){
						alert("true");
					}
					else { alert("false"); }
				}
			}
		</script>
	</body>
</html>