Javascript: использование querySelectorAll для поиска всех элементов ввода, соответствующих определенным условиям

Я создаю страницу form.html и пытаюсь получить массив с помощью Javascript в моем файле form.js с 5 полями, которые пользователь должен ввести с помощью querySelectorAll, но мой код не работает.

Что я делаю не так? Я хочу, чтобы мой JS-код находил все поля, которые:

  1. входные элементы
  2. начни с тхт
  3. либо type=txt, либо type=password

window.addEventListener('DOMContentLoaded', function() {
  let divMain = document.getElementById("divMain");
  let inputElements = divMain.getElementById("frmRegister").querySelectorAll(input[id ^= txt][type = "text"], input[id ^= txt][type = "password"]);
  console.log(inputElements.length);
});
<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>


javascript selectors-api
person Leon S    schedule 18.08.2020    source источник
comment
Попробуйте использовать кавычки, такие как querySelectorAll('input[id^="txt"][type="text"], input[id^="txt"][type="password"]')   -  person Umair Khan    schedule 18.08.2020
comment
Сделал вам фрагмент. Выдает четкие консольные ошибки — не нужно использовать родителя для получения другого элемента по id — просто используйте document.getElementById("frmRegister")   -  person mplungjan    schedule 18.08.2020
comment
И добавить кавычки let inputElements = document.getElementById("frmRegister").querySelectorAll('input[id^=txt][type="text"], input[id^=txt][type="password"]');   -  person mplungjan    schedule 18.08.2020

Ответы (3)


arrow_upward
0
arrow_downward

Вы слишком усложняете свои селекторы, не хватает некоторых кавычек

 let inputElements = document.getElementById("frmRegister")
    .querySelectorAll('input[id^=txt][type="text"], input[id^=txt][type="password"]');

Но проще использовать фильтр:

window.addEventListener('DOMContentLoaded', function() {
  let inputElements = [...document.getElementById("frmRegister").querySelectorAll('input[id ^= txt]')]
    .filter(elem => elem.type === "text" || elem.type==="password");

  console.log(inputElements);
  // or
  inputElements.forEach(elem => console.log(elem.id,elem.type)); 
});
<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

person mplungjan    schedule 18.08.2020

arrow_upward
0
arrow_downward

Вот

window.addEventListener('DOMContentLoaded', function() {
  let inputElements = document.getElementById("frmRegister").querySelectorAll('input[id^=txt][type="text"], input[id^=txt][type="password"]');
  console.log(inputElements)
});
<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

Все входы

window.addEventListener('DOMContentLoaded', function() {
  let inputElements = document.getElementById("frmRegister").querySelectorAll('input[id^=txt][type="text"], input[id^=txt][type="password"]');
  console.log(inputElements.length)
});
<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

person Umutambyi Gad    schedule 18.08.2020

arrow_upward
-1
arrow_downward

getElementById является частью объекта документа, но не элемента объект.

Ваш код с небольшими изменениями.

(function() {
  let divMain = document.getElementById("divMain");
  let inputElements = divMain.querySelector("#frmRegister").querySelectorAll('input[id^="txt"][type="text"], input[id^="txt"][type="password"]');
  console.log(inputElements);
})();
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

person Umair Khan    schedule 18.08.2020