Given a form with error states, when the user hits a submit button, the focus should move to the first field with an error state. I'm able to grab the first instance of a field with an error state using:
[...document.querySelectorAll(".form-w1")].find(el => el.classList.contains("error"))
but can't get the input field nested in the div to set focus to it.
console.log([...document.querySelectorAll(".form-w1")].find(el => el.classList.contains("error")))<span class="form-w1">
<label>
<span>First Name</span>
</label>
<span>
<input id="f1" type="text" required="" placeholder=" ">
</span>
</span>
<span class="form-w1 error">
<label>
<span>Last Name</span>
</label>
<span>
<input id="f2" type="text" required="" placeholder=" ">
</span>
</span>In this case, there's no need to use .find().
Simply use a selector that fully selects what you're looking for:
document.querySelector('.form-w1.error input')?.focus();