Estoy trabajando en un código que me permitiría presionar diferentes "botones" para insertar un valor dentro de una entrada de tipo de texto de un formulario HTML.
Actualmente, puedo hacer que el código funcione con un botón conectado a un detector de eventos para modificar el valor en el campo de texto, sin embargo, cuando traté de agregar varios botones para editar el mismo campo de texto, por alguna razón, no puedo obtener que funcione.
Probé diferentes soluciones, como agregar detectores de eventos individuales a cada botón y agregar un campo de parámetro a la función principal, sin embargo, todavía no puedo hacer que funcione por algún motivo.
Estos son los fragmentos de código reproducibles mínimos para HTML y JS:
const textField = document.querySelector('input[name = "textField"]'); var myElement = document.forms['Test']['textField']; const validTextStrings = ["Hello World", "Goodbye World"] var button = document.querySelector('input[name = "button"]'); //var button2 = document.querySelector('input[name = "button2"]'); button.addEventListener("click", updateTextField); function updateTextField() { console.log("button pressed"); console.log(button.value); if (allValidValues(button.value)) { myElement.setAttribute('value', button.value); } } function allValidValues(value) { for (i = 0; i < validTextStrings.length; i++) { if (value == validTextStrings[i]) { return true; } } console.log("Invalid value"); return false; } <body> <form name="Test"> <input type="button" name="button" value="Goodbye World" class=".btn"> <input type="button" name="button2" value="Hello World" class=".btn"> <input type="text" value='TEST' placeholder="TEXT NEEDS UPDATING" name="textField"> </form> </body>¡Ya casi has llegado! Simplemente use el parámetro de evento que contiene el valor del objetivo.
Solución
button.addEventListener("click", updateTextField); button2.addEventListener("click", updateTextField); function updateTextField(event) { console.log("button pressed"); console.log(event.target.value); if (allValidValues(event.target.value)) { myElement.setAttribute('value', event.target.value); } }Cada EventListenerCallback tiene un solo parámetro: un objeto basado en Event .
Sugerencia
Le sugiero que use una identificación que la de la clase. Usando ids es más fácil apuntar a un elemento específico. Otro cambio que hice fue crear eventListeners separados para los botones.
Obtiene un objeto de evento en el parámetro de la función de escucha que le brinda un valor objetivo para usar. El objeto de evento también tiene otras propiedades que analizar.
const textField = document.getElementById('textField'); var myElement = document.forms['Test']['textField']; const validTextStrings = ["Hello World", "Goodbye World"] var button1 = document.getElementById('btn1'); var button2 = document.getElementById('btn2'); button1.addEventListener("click", updateTextField); button2.addEventListener("click", updateTextField); function updateTextField(event) { if (allValidValues(event.target.value)) { myElement.setAttribute('value', e.target.value); } } function allValidValues(value) { for (i = 0; i < validTextStrings.length; i++) { if (value == validTextStrings[i]) { return true; } } console.log("Invalid value"); return false; } <body> <form name="Test"> <input type="button" name="button" value="Goodbye World" class=".btn" id="btn1"> <input type="button" name="button2" value="Hello World" id="btn2" class=".btn"> <input type="text" value='TEST' id="textField" placeholder="TEXT NEEDS UPDATING" name="textField"> </form> </body>He seleccionado todos los botones por document.querySelectorAll(".btn");
Luego he loop todos estos botones y he adjuntado un click incluso. También he enlazado la función ()=>{} updateTextFeild() dentro del ciclo.
En su código, querySelector() solo seleccionará el primer elemento, por lo que estaba seleccionando solo el first button .
Entonces, siempre que quieras seleccionar más de un elemento, debemos usar querySelectorAll o getElementsByClassName .
querySelector solo es bueno para seleccionar un elemento específico, como seleccionar un elemento por attribute de id . Por último, no estoy seguro, pero nunca pase .```` (dot operator) inside of attribute. Like use class="btn" instead of class=".btn"```.
const textField = document.querySelector('input[name = "textField"]'); var myElement = document.forms['Test']['textField']; const validTextStrings = ["Hello World", "Goodbye World"] let buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener("click", () => { console.log(button.value); if (allValidValues(button.value)) { myElement.setAttribute('value', button.value); } }); }) function allValidValues(value) { for (i = 0; i < validTextStrings.length; i++) { if (value == validTextStrings[i]) { return true; } } console.log("Invalid value"); return false; } <body> <form name="Test"> <input type="button" name="button" value="Goodbye World" class="btn"> <input type="button" name="button2" value="Hello World" class="btn"> <input type="text" value='TEST' placeholder="TEXT NEEDS UPDATING" name="textField"> </form> </body>este es un caso típico en el que tiene que usar la delegación de eventos
const form_Elm = document.forms.Test; form_Elm.onclick = (evt) => { if (evt.target.matches('button')) // verify clicked element tagName { form_Elm.textField.value = evt.target.textContent console.clear() console.log( evt.target.name ) } } <form name="Test"> <button type="button" name="button1" class=".btn">Goodbye World</button> <button type="button" name="button2" class=".btn">Hello World</button> <input type="text" name="textField" value="" placeholder="TEXT NEEDS UPDATING"> </form>