Как понять, почему при вызове функции не исполняется некоторый фрагмент?

Question

[lesh_osipov]

Добрый день. Имеется фрагмент кода, который выводит существующий массив на страницу, и добавляет и удаляет при вызове .push и .pop. Функция в самом начале исполняет свой код выводя текущий массив на страницу, после при нажатие на кнопку .push, у нас добавляет новый элемент в массив, и чтобы его отобразить мы же в функции p1 (метод .push) вызываем функцию test() все заново. И вопрос в том, почему при цикле for на страницу не выводится все заново содержимое массива, а выводится только НОВОЕ значение. Тоже самое происходит и с .pop, просто удаляет последний элемент массива, без вывода всего массива. Как это работает?

let m = [1, 2, 3, 4, 5, 6, 'hello'];

function test (){
    let p = document.getElementById('out');
    let str = '';
    for (let i = 0; i < m.length; i++) {
        str += i + ' --- ' + m[i] + '<br>';
    }
    p.innerHTML = str;
}


test();


function p1(){
    let i1 = document.getElementById('i1').value;
    m.push(i1);
    test(); 
}

function p2(){
    m.pop();
    test();
}

Answer 1

[BigSmoke]

Да вроде нормально ваш код работает. Ссылка. Если закомментировать вызов p2 в 29 строке выведется массив с элементом добавленным в p1.

Comments

[lesh_osipov]

Ну то, что он работает как надо это понятно. Просто я не понимаю, почему при вызове функции test в функции p1, цикл for перебирает и выводит новые значения, а не все. А если просто test вызвать, то он все текущие покажет, которые заданы изначально в массиве

[BigSmoke]

lesh_osipov, В вашем коде test при вызове из p1 перебирает весь массив, а не только новые элементы. Можете это проверить по ссылке, которую я скинул.