0

проблема с инпутом "Количество ячеек". При указании числа ячеек, его удалением и указанием нового числа предыдущая информация о количестве строк должна аннулироваться, а она просто прибавляет каждый раз указываемое значение. Как решить?

let out = document.getElementById('out');
let inputRow = document.getElementById('inputRow');
let inputCell = document.getElementById('inputCell');

// inputRow.addEventListener
inputRow.addEventListener('input', function() {
  out.innerHTML = inputRow.value;
  for (i = 0; i < inputRow.value; i++) {
    let row = document.createElement('div');
    out.appendChild(row);
    // inputCell.addEventListener
    inputCell.addEventListener('input', function() {
      for (j = 0; j < inputCell.value; j++) {
        let cell = document.createElement('section');
        row.appendChild(cell);
      }
    })
  }
});
div {
  outline: 1px solid red;
  height: 50px;
  margin-bottom: 1px;
  display: flex;
  //flex-wrap: wrap;
  justify-content: space-around;
}

section {
  border: 1px dotted green;
  width: 100%;
  text-align: center;
}
Количество строк <input type="text" id="inputRow"> Кoличество ячеек <input type="text" id="inputCell">

<p id="out"></p>

1 ответ 1

1

для решения "проблемы" достаточно уже имеющийся код вынести в отдельную функцию draw и вызывать её каждый раз при изменении входных данных (количество строк/столбцов).

let out = document.getElementById('out');
let inputRow = document.getElementById('inputRow');
let inputCell = document.getElementById('inputCell');

inputRow.addEventListener('input', draw);
inputCell.addEventListener('input', draw)

function draw() {
  out.innerHTML = inputRow.value;
  for (i = 0; i < inputRow.value; i++) {
    let row = document.createElement('div');
    out.appendChild(row);
    for (j = 0; j < inputCell.value; j++) {
      let cell = document.createElement('section');
      row.appendChild(cell);
    }
  }
}
div {
  outline: 1px solid red;
  height: 50px;
  margin-bottom: 1px;
  display: flex;
  //flex-wrap: wrap;
  justify-content: space-around;
}

section {
  border: 1px dotted green;
  width: 100%;
  text-align: center;
}
Количество строк <input type="text" id="inputRow"> Кoличество ячеек <input type="text" id="inputCell">

<p id="out"></p>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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