Open

why some operations does not apply to an element with two css classes?

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?