Soy nuevo en JS. Estoy aprendiendo a aplicar detectores de eventos, listas de nodos, pero tengo problemas con la sintaxis de JavaScript para esta consulta. Quiero extraer el HTML interno de cada botón a su cuadro de texto correspondiente dentro del div principal. Entonces, si un usuario hace clic en el botón 3, por ejemplo, solo el valor del cuadro de texto 3 debe leer el HTML interno del botón 3. Como puede ver, el detector de eventos para activar cada botón funciona pero tiene problemas con los cuadros de texto.
let buttoninput = document.querySelectorAll(".buttoninput"); let textbox = document.querySelectorAll(".textbox"); buttoninput.forEach(btnclickevent => { btnclickevent.addEventListener('click', () => { textbox.forEach(content => { content.value = btnclickevent.innerHTML; }); }); }); <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 1</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 2</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 3</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 4</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 5</button> </div>Soy consciente de que puede crear una identificación para cada entrada y botón del cuadro de texto y crear reglas individuales, pero quiero evitar esa ruta ya que sería una larga línea de código. En este momento, la lista es 5, pero si duplico, digamos, 10 o 20 veces, me gustaría que la sintaxis active solo cada contenido de div principal, independientemente de la cantidad de duplicados.
Cualquier ayuda sería muy apreciada.
Gracias
Puede encontrar el hermano del botón por parentNode.children[0] como
btnclickevent.parentNode.children[0].value = btnclickevent.innerHTML; let buttoninput = document.querySelectorAll(".buttoninput"); let textbox = document.querySelectorAll(".textbox"); buttoninput.forEach(btnclickevent => { btnclickevent.addEventListener('click', () => { btnclickevent.parentNode.children[0].value = btnclickevent.innerHTML; //textbox.forEach(content => { // content.value = btnclickevent.innerHTML; //}); }); }); <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 1</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 2</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 3</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 4</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 5</button> </div>¡Debe usar parentElement para llegar a la entrada vecina!
let buttoninput = document.querySelectorAll(".buttoninput"); buttoninput.forEach(btnclickevent => { btnclickevent.addEventListener('click', () => { let textbox = btnclickevent.parentElement.querySelector(".textbox"); textbox.value = btnclickevent.innerHTML; }); }); <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 1</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 2</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 3</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 4</button> </div> <div> <input type="text" name="" class="textbox" value=""> <button class="buttoninput">Button 5</button> </div>