die erste leere Eingabe Finding

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> 

Ich habe nur diese Eingaben auf einer Seite und ich versuche, einen Wert dynamisch in jede leere Eingabe zu konzentrieren und geben Sie ein:

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

... funktioniert aber nur für die erste Eingabe, sollte dies nicht immer den nächsten leeren Eingang auswählen?

Answer 1

Dies funktioniert:

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 = ... nicht tatsächlich das Attribut selbst im DOM zu verändern. Verwenden Sie .setAttribute, um die tatsächliche Änderung in dem DOM vorzunehmen, das querySelector sehen kann.