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];

$(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?

2 ответа 2

3

    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>

1

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

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

4
  • как-то не очень красиво это выглядит. Денис решил задачу, а вы его решение оформляете, как своё и ставите галочку себе.И даже с точки зрения репы вы не получили ничего, но отдав решение автору решения Denis640Kb вы получите +2 12 апр 2020 в 7:40
  • @Alexandr_TT во-первых: он ничего за меня не решал. Потому что у меня уже есть решение в виде кода. Я его сам написал. Только чуть некорректное.(см. тело вопроса). Во-вторых: никто решать за меня не просил. У меня есть свой мозг, чтобы решить задачу. У меня были чёткие конкретные вопросы: Почему так происходит? и как исправить . В ответе Denis640Kb ответа на данный вопрос нет. Ни одного пояснения. Просто тупо голый код, который что-то делает. Что? Да кто его знает. Ни одного пояснения. Грош цена таким ответам. В моём же именно ответ ПОЧЕМУ не работал код корректно и как исправить 12 апр 2020 в 7:54
  • "Ни одного пояснения. Просто тупо голый код," Вы явно не справедливы Разве нет пояснений в коде Дениса? По моему каждая строчка прокомментирована Что довольно редко встретишь в других ответах SO 12 апр 2020 в 8:00
  • @Alexandr_TT я не балбес, чтобы на очевидные строчки типа "создаём td" и "проставляем класс" давать пояснения. Очевидно я итак это знаю, предоставив код в вопросе. Давайте ещё раз: у меня были конкретные вопросы. Ответа на них не получено. Не предоставлен ответ решения проблемы. Следствие: ответ бесполезный. В случае возникновения такой же проблемы я буду вынужден опять бежать на стак, вместо того, чтобы уже знать о нюансах onchange и oninput, чтобы больше такой ошибки не допускать. А всё потому, что такие как денис не дают объяснения на вопрос ПОЧЕМУ так происходит, а просто пишут код 12 апр 2020 в 8:02

Ваш ответ

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

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