MI html tiene varios divs que comparten el mismo nombre de clase y tienen elementos de entrada con identificadores únicos, quiero agregar un lapso debajo de todas estas entradas con JavaScript sin editar el html.
esta es la parte de html
<form name="form" onsubmit="return validate();" method="get"> <div class="form-group"> <label for="pass">Password</label> <input type="password" class="form-control" name="pass" id="pass"> </div> <div class="form-group"> <label for="pass2">Re-Type Password</label> <input type="password" class="form-control" name="pass2" id="pass2"> </div> . . . </form>este es mi JS para crear y agregar el lapso
const errorMessage = document.createElement('span'); errorMessage.textContent = "invalid input"; document.querySelector('.form-group').appendChild(errorMessage);Pero esto solo crea un lapso en el primer div
debe obtener todos los elementos que tienen un grupo de formularios de clase con querySelectorAll
const arrayElement = document.querySelectorAll('.form-group'); for(let i = 0; i < arrayElement.length; i++) { const errorMessage = document.createElement('span'); errorMessage.textContent = "invalid input"; arrayElement[i].appendChild(errorMessage); }Use querySelectorAll() e itere.
querySelectorAll(".form-group").forEach(form => { const errorMessage = document.createElement('span'); errorMessage.textContent = "invalid input"; form.appendChild(errorMessage); });querySelector solo obtiene la primera instancia. Debe usar querySelectorAll. Luego pon todo dentro de un bucle.
let group = document.querySelectorAll('.form-group') for (let i = 0; i < group.length; i++) { const errorMessage = document.createElement('span'); errorMessage.textContent = "invalid input"; group[i].appendChild(errorMessage); } <form name="form" onsubmit="return validate()" method="get"> <div class="form-group"> <label for="pass">Password</label> <input type="password" class="form-control" name="pass" id="pass"> </div> <div class="form-group"> <label for="pass2">Re-Type Password</label> <input type="password" class="form-control" name="pass2" id="pass2"> </div> </form>