i have two input elements and a button as follow:
<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>
in js I want to by clicking on the button, both input element contents become clear, so I write this line of code in the button event handler function:
document.querySelector('.opt-in').value = '';
but it does not work!! in fact if I write above code for '.close-acc-pin' and '.close-acc-usr' class names instead of .opt-in it works! but why with '.opt-in' it does not work?
1 Replies
If you use querySelectorAll then may be its working .You can try like this
let btn = document.querySelector('.opt-btn')
btn.addEventListener('click', function() {
let inputs = document.querySelectorAll('.opt-in');
inputs.forEach(input => input.value = '')
})