Рендеринг при событии "change" срабатывает только если сдвинуть мышку в сторону

Question

Есть простой код:

let freeNumbers = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99];

$(document).on('change', '#element-counter', showTableChildrenCount);
$(document).ready(() => showTableChildrenCount());

function showTableChildrenCount() {
    let count = parseInt($('#element-counter').val());
    let testTableTr = $('#test tr');
    let itemsHtml = '';
    
    testTableTr.html('');

    for (let i = 0; i <= count - 1; ++i){
      itemsHtml += `<td class="children-counter-item">${freeNumbers[i]}</td>`;

      // let el = $('<td class="children-counter-item"></td>').html(freeNumbers[i]);
      // testTableTr.append(el);
    }

    testTableTr.html(itemsHtml);    
    console.log(111);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="number" id="element-counter" name="test" value="1" min="0">
	
<table id="test">
  <tr></tr>
</table>

При событии change должны браться номера из объявленного массива и отображаться в таблице. Однако происходит это не каждый раз при событии, а с глюками: первый раз срабатывает, а отображение информации после второго-третьего-четвертого-итд раза только если сместить мышку в сторону (не путать с событием keyup). То есть как будто для рендеринга нужно сказать браузеру чтобы он обновил информацию об окне и перерисовал. Почем так происходит? И как исправить так, чтобы отрисовка происходила каждый раз при событии change?

Answer 1

    let freeNumbers = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99];

    let input = document.getElementById('element-counter'); // Получаем элемент input
    input.oninput = showTableChildrenCount; // При изменении выполняем функцию

    function showTableChildrenCount() {
        let count = parseInt(input.value); // Получаем число из строки
        let testTableTr = document.getElementById('test'); // Получаем таблицу по id
        let z = document.createElement('tr'); // Создаём tr

        for (let i = 0; i <= count - 1; ++i){
            let itemsHtml = document.createElement('td'); // создаём td
            itemsHtml.className = 'children-counter-item'; // Проставляем класс
            itemsHtml.innerText = freeNumbers[i]; // Добавляем текст
            z.appendChild(itemsHtml); // Каждый td добавляем в tr
        }
        testTableTr.innerHTML = ''; // Очищаем элемент
        testTableTr.appendChild(z); // Добавляем child
    }

<input type="number" id="element-counter" name="test" value="1" min="0">

<table id="test">
</table>

Answer 2

Посмотрел ответ @Denis640Kb и понял именно почему не работает.

Оказалось, что на поле с типом number нужно использовать событие oninput, а не onchange. Тогда будет отрабатывать всё корректно.

БЛОГ НА HUSL

Рендеринг при событии "change" срабатывает только если сдвинуть мышку в сторону

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