Estoy tratando de obtener el valor de un campo de texto html simple, pero cada vez que escribo algo y presiono Intro, no se guarda ningún valor. Traté de comparar la entrada del campo de texto con un simple == pero nada funciona. Ni siquiera obtengo ningún valor para console.log(textervalue). ¿Alguien sabe lo que estoy haciendo mal?
<div class="splitscreen" > <div class="left"> <video class="input_video"></video> <canvas class="output_canvas" width="960" height="540" id="rand"></canvas> </div> <div class="right"> <canvas class="chat_canvas" width="250" height="500" id="rundrand" ></canvas> <form action="/url" method="GET" id="rand_text"> <input type="text" id ='texter' value='Guess here' autocomplete ='off'> </form> </div> </div> var read = 'car'; textervalue = document.getElementById("texter").value; //just to test if i get a value if (textervalue == read) { canchat.fillStyle="#FFFFF"; canchat.fillRect(0,0, canvasChat.width, canvasChat.height); } console.log(textervalue);No obtiene ningún valor porque necesita un detector de eventos para que JS sepa extraer datos una vez que se haya llenado el campo.
En el formulario HTML, agregue un botón y luego use un detector de eventos para verificar cuándo se hizo clic en el botón. Entonces, JS sabrá tomar el valor del campo de entrada.
Sin preventDefault()
let btn = document.getElementById('submitBtn'); btn.addEventListener('click', function() { textervalue = document.getElementById("texter").value; console.log(textervalue); }); <div class="splitscreen" > <div class="left"> <video class="input_video"></video> <canvas class="output_canvas" width="960" height="540" id="rand"></canvas> </div> <div class="right"> <canvas class="chat_canvas" width="250" height="500" id="rundrand" ></canvas> <form action="/url" method="GET" id="rand_text"> <input type="text" id ='texter' value='Guess here' autocomplete ='off'> <button id="submitBtn">Submit</button> </form> </div> </div> Con preventdefault()
let btn = document.getElementById('submitBtn'); btn.addEventListener('click', function(e) { e.preventDefault(); textervalue = document.getElementById("texter").value; console.log(textervalue); }); <div class="splitscreen" > <div class="left"> <video class="input_video"></video> <canvas class="output_canvas" width="960" height="540" id="rand"></canvas> </div> <div class="right"> <canvas class="chat_canvas" width="250" height="500" id="rundrand" ></canvas> <form action="/url" method="GET" id="rand_text"> <input type="text" id ='texter' value='Guess here' autocomplete ='off'> <button id="submitBtn">Submit</button> </form> </div> </div><form action="/url" method="GET" id="rand_text"> <input type="submit" onclick="fonctionHere(this)" id ='texter' value='Guess here' autocomplete ='off'> </form> function fonctionHere(e) { console.log(e.value); }enviar es una entrada de acción de formulario directamente ... y con un clic, tenemos "esto", algo así como estos mismos códigos "getElementById" se envió a la función directamente