Получить все input

Question

Подскажите,пожалуйста, где есть ошибка в коде. Формулировка задания:

Кнопка b-14 запускает функцию t14 Функция должна: получить все input.i-14; перебрать их с помощью цикла while. Обращение к элементу выглядит так elem[i] вывести в out-14 value выбранного. Проверить выбран ли элемент можно с помощью elem[i].checked

     function t14() {
   let i14 = document.querySelector('.i-14').value;
   let out14 = document.querySelector('.out-14');
   let i = 0
   let newStr = ''
   while (i <= i14) {
      if (i14[i].checked) {
         newStr += i14[i]
         i++
        
      }
   }
   out14.innerHTML = newStr
}

document.querySelector('.b-14').onclick = t14;

Answer 1

Сначала о некоторых недочётах в вашем коде.

Насколько я понимаю, если элементы единичны, стоит использовать id, если их много однотипных — тогда class. Остальное в комментариях.

function t14() {
   let i14 = document.querySelector('.i-14').value; // несколько элементов получаем при помощи querySelectorAll, а value будем получать уже от каждого элемента
   let out14 = document.querySelector('.out-14');
   let i = 0
   let newStr = ''
   while (i <= i14) { // сравнивать нужно с i14.length, и вместо <= нужно <, т.к. длина всегда больше номера последнего элемента
      if (i14[i].checked) {
         newStr += i14[i] // вот тут нужно использовать .value
         i++ // это увеличение должно происходить вне зависимости от условия
        
      }
   }
   out14.innerHTML = newStr
}

document.querySelector('.b-14').onclick = t14;

Попробуем исправить:

function t14() {
   let i14 = document.querySelectorAll('input.i-14');
   let out14 = document.querySelector('#out-14');
   let i = 0;
   let newStr = '';
   while (i < i14.length) {
      if (i14[i].checked) {
         newStr += i14[i].value;
      }
      i++;
   }
   out14.innerHTML = newStr;
}

document.querySelector('#b-14').onclick = t14;

<input type="checkbox" id="one" class="i-14" value="one">
<label for="one">one</label><br>
<input type="checkbox" id="two" class="i-14" value="two">
<label for="two">two</label><br>
<input type="checkbox" id="three" class="i-14" value="three">
<label for="three">three</label><br>

<button id="b-14">click</button><br>

<div id="out-14"></div>

Answer 2

Вот Вам вариант с циклом for:

function t14() {
    let inputs = document.querySelectorAll('.i-14');
    let out14 = '';

    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            out14 = inputs[i].value;
        }
        document.querySelector('.out-14').innerHTML = out14;
    }

}

document.querySelector('.b-14').onclick = t14;

БЛОГ НА HUSL

Получить все input

Ответы (2 шт):