найти первый пустой вход

Question

<div class="input-group"> 
    <input type="password" maxlength="1" value="" readonly=""> 
    <input type="password" maxlength="1" value="" readonly=""> 
    <input type="password" maxlength="1" value="" readonly=""> 
    <input type="password" maxlength="1" value="" readonly=""> 
</div> 

У меня есть только эти входы на странице, и я пытаюсь сосредоточиться и введите значение динамически в каждый пустой вход:

document.querySelector('input[value=""]').value = 1 

... работает, но только для первый вход, не следует ли каждый раз выбирать следующий пустой вход?

Answer 1

Это работает:

document.getElementById('fill').addEventListener('click', evt => { 
 
    document.querySelector('input[value=""]').setAttribute('value', '1'); 
 
});

<div class="input-group"> 
 
    <input type="password" maxlength="1" value="" readonly=""> 
 
    <input type="password" maxlength="1" value="" readonly=""> 
 
    <input type="password" maxlength="1" value="" readonly=""> 
 
    <input type="password" maxlength="1" value="" readonly=""> 
 
</div> 
 
<button id="fill">Fill</button>

.value = ... не фактически изменяет сам атрибут в DOM. Используйте .setAttribute, чтобы внести фактическое изменение в DOM, которое может видеть querySelector.