1

Смысл задачи: есть текстовое поле и кнопка. По введенному числу в поле и нажатию на кнопку выводит соответствующее количество чекбосов в столбик. Но отображение блоков существует только в процессе работы цикла(см. код). После цикла отображение пропадает. Как исправить эту ошибку, подскажите пожалуйста?

function checkButton(temp) {
  var value = temp.value;

  if (/^[1-9]+$/i.test(value)) {
    var n = Number(value);
    var chekbx = [];
    var form = document.getElementById('z')
    for (var i = 0; i < n; i++) {
      chekbx[i] = document.createElement('input');
      chekbx[i].type = "checkbox";
      chekbx[i].name = "ch" + i;
      chekbx[i].onchange = "Change()";
      chekbx[i].style.display = "block";
      form.appendChild(chekbx[i]);

    }

  } else {
    alert("Введите верные данные, в формате числа от 1 до 9");

  }
}
<form id="z">
  введите количество чекбоксов
  <input type="text" placeholder="Количество чекбоксов..." name="box" />
  <input type="submit" id="submitButton" onCLick="checkButton(box)" value="Отправить" />
</form>

0

2 ответа 2

3

Причина в том что при нажатии кнопки в форме, данные формы отправляются, и это приводит к перезагрузке страницы.
Если бы у формы был указан атрибут action, то данные отправлялись бы на URL в значении этого атрибута. По-умолчанию, action равен URL текущей страницы.

Для того чтобы форма не выполняла отправку данных, необходимо:

  • либо прописать тип кнопки (как верно указано в предыдущем ответе)
    И тогда возникает резонный вопрос, "автор, а нафига в данном случае используется форма?", ведь гораздо проще поместить элементы в <div>...

  • либо, в обработчике события формы submit вызвать метод Event.preventDefault() - этот метод отменяет выполнение стандартного действия при событии.

В целом, тут логичнее не использовать устаревшее и некрасивое присвоение обработчика через onclick кнопки, а вместо этого перенести код создания чекбоксов в слушатель события формы submit.

document.addEventListener('DOMContentLoaded', () => {
  document.forms.z.addEventListener('submit', zFormSubmit); 
}); 

function zFormSubmit(e) {
  e.preventDefault(); 
  for (let el of this.querySelectorAll('.cb-label'))
    el.remove(); 
  for (var cbHtml = '', i = 0; i < +this.count.value; i++) 
    cbHtml += `
      <label class="cb-label">
        <input name="ch${i}" type="checkbox" value="${i}" onchange="cbChange(this)">
        Чекбокс ${i + 1}
      </label>
    `; 
  this.insertAdjacentHTML('beforeend', cbHtml); 
}

function cbChange(el) {
  const cbLabel = el.closest('label').textContent.trim(); 
  console.clear(); 
  console.log(`${cbLabel} (value=${el.value}) изменен: checked=${el.checked}`); 
}
body, input, button { font: 16px sans-serif; }
#z { width: 400px; margin: 0 auto; padding: 8px 16px; text-align: center; box-shadow: 0 3px 9px 0 #0002; }
#cb-count { width: 40px; }
.cb-label { display: block; margin: 0 24px; line-height: 1.5em; text-align: left; }
.cb-label:hover { color: #070; cursor: pointer; }
<form id="z" name="z">
  <label>
    Введите количество чекбоксов: 
    <input id="cb-count" name="count" type="number" min="1" max="9" placeholder="1..9" required>
  </label>
  <button type="submit" name="create">Создать</button>
</form>

В примере я оставил onchange у инпутов, но правильнее - отделять HTML-разметку от JS: прослушивая события click на форме, и фильтруя их по произвольному свойству Event.target (например, по классу).

3

Измени input type="submit" на type="button"

function checkButton(temp) {
  var value = temp.value;

  if (/^[1-9]+$/i.test(value)) {
    var n = Number(value);
    var chekbx = [];
    var form = document.getElementById('z')
    for (var i = 0; i < n; i++) {
      chekbx[i] = document.createElement('input');
      chekbx[i].type = "checkbox";
      chekbx[i].name = "ch" + i;
      chekbx[i].onchange = "Change()";
      chekbx[i].style.display = "block";
      form.appendChild(chekbx[i]);

    }

  } else {
    alert("Введите верные данные, в формате числа от 1 до 9");

  }
}
<form id="z">
  введите количество чекбоксов
  <input type="text" placeholder="Количество чекбоксов..." name="box" />
  <input type="button" id="submitButton" onCLick="checkButton(box)" value="Отправить" />
</form>

2
  • благодарю запомощь
    – Alexandr
    19 мая 2018 в 12:32
  • Всегда пожалуйста
    – Air
    19 мая 2018 в 13:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.