Tengo dos elementos de entrada y un botón de la siguiente manera:
<input class="close-acc-usr opt-in" type="text" name="closeAccUsr" /> <input class="close-acc-pin opt-in" type="number" name="closeAccPin" /> <button class="opt-btn close-btn">→</button>En js quiero hacer clic en el botón, ambos contenidos del elemento de entrada se vuelven claros, así que escribo esta línea de código en la función del controlador de eventos del botón:
document.querySelector('.opt-in').value = '';¡¡Pero no funciona!! de hecho, si escribo el código anterior para los nombres de clase '.close-acc-pin' y '.close-acc-usr' en lugar de .opt-in, ¡funciona! pero ¿por qué con '.opt-in' no funciona?
Intente seleccionar todas las entradas con querySelectorAll :
const btn = document.querySelector('.opt-btn') btn.addEventListener('click', function() { const inputs = document.querySelectorAll('.opt-in'); inputs.forEach(input => input.value = '') }) <input class="close-acc-usr opt-in" type="text" name="closeAccUsr" /> <input class="close-acc-pin opt-in" type="number" name="closeAccPin" /> <button class="opt-btn close-btn">→</button>En lugar de usar dos clases para esa entrada, ¿por qué no cambiar esa clase opt-in suscripción a una identificación como esta?
<input id="opt-in" class="close-acc-usr" type="text" name="closeAccUsr" /> →Luego en tu JS esto:
document.querySelector('#opt-in').value = '';o mejor aun esto
document.getElementById('opt-in').value = '';