Tengo la siguiente configuración en html
<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>esto tiene un cuadro de texto donde puedo seleccionar un número del 1 al 4 si selecciono un número que quiero en mi archivo js como variable
He intentado esto en mi archivo js:
var tt = document.getElementsByTagName("input")[0].value; console.log(tt);Necesito que tt var sea igual a la entrada. ¿Necesito agregar un botón para enviar mi entrada? o una vez que selecciono del 1 al 4, mi archivo js puede tomar el valor
Me gustaría señalar estas dos cosas.
<input type="number"> no están realmente hechos para "seleccionar" valores. Aunque, por supuesto, puede usar alguna biblioteca de autocompletar para ayudarlo con eso. Un elemento <select> es probablemente la opción más natural para la tarea.const en su lugar: const tt=document.querySelector("input"); // the "variable" you require is then tt.value: console.log(tt.value)En una aplicación "real", probablemente debería usar un selector de CSS más específico, como una clase o una identidad.
Puedes probar y cambiar:
<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>A :
<input maxlength="1" type="number" min="1" max="4" id="c0r0" />A continuación se muestran las dos formas simples de hacer esto.
Adjunte un detector de eventos de cambio al elemento de entrada, es decir, una función que se llama cada vez que cambia el valor. Luego use la propiedad de destino del evento para obtener el valor. Para más detalles, lea este evento onchange
Obtenga la referencia del elemento html usando getElementById ( leer más ) y luego use ese elemento para acceder al valor.
Nota: Usar getElementById es fácil y simple ya que obtiene el elemento de destino mientras que otros métodos devuelven una colección y tendrá que encontrar el elemento de interés en la colección.
A continuación se muestra una pequeña demostración de los métodos recomendados anteriormente.
function getValue(event) { // Method 1 var val = event.target.value console.log('first box:' + val); } function method2() { // Method 2 val = document.getElementById('c1r1').value; console.log('second box:' + val) } <input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="getValue(event)" /> <input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="method2(event)" />