Tengo un elemento llamado <input id="emailprotectionspamallinput" class="ms-SearchBox-field" type="text" value="">
donde al principio no hay nada dentro del cuadro.
Quiero agregar algo de texto al campo de entrada, luego tomar el valor del cuadro de texto. Sin embargo, el valor siempre parece ser nulo cuando se realiza un console.log
Aquí está el botón que quiero que active la captura de valores:
<button class="ms-Button ms-Button--primary" style="float: left" id="get-getblacklistallemailinfor"> <span class="ms-Button-label">CONFIRM</span> </button>
Aquí está el javascript que maneja el botón:
$("#get-getblacklistallemailinfor").click(getblacklistallemailinfor); function getblacklistallemailinfor(){ const emailvar = document.getElementById("emailprotectionspamallinput") const output = document.querySelector('div.enteremailinfoforblacklistall'); console.log(emailvar) console.log(emailvar) console.log(output) }
Como ya estaba usando jquery, puede obtener la entrada con:
const emailvar = $('#emailprotectionspamallinput').val();
Comenté su salida ya que no está definida. No proporcionó un div con ese nombre
$("#get-getblacklistallemailinfor").click(getblacklistallemailinfor); function getblacklistallemailinfor(){ const emailvar = $('#emailprotectionspamallinput').val(); //const output = document.querySelector('div.enteremailinfoforblacklistall'); console.log(emailvar) console.log(output) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="email" class="ms-SearchBox-field" type="text" value=""> <button class="ms-Button ms-Button--primary" style="float: left" id="get-getblacklistallemailinfor"> <span class="ms-Button-label">CONFIRM</span> </button>
const output = document.querySelector('div.enteremailinfoforblacklistall');
Selecciona el primer div
con la clase enteremailinfoforblacklistall
, no cualquier elemento de entrada.
Puede seleccionar su elemento de entrada con
const output = document.querySelector("#emailprotectionspamallinput");
en cambio.
output
será una instancia de HTMLInputElement
en este caso, que posee el atributo de value
.
value
: Devuelve/Establece el valor actual del control.
Para acceder a lo que el usuario ha ingresado en el elemento de output
, use
output.value
que luego también puede iniciar sesión en la consola. Es solo un atributo.
console.log(console.value);