Почему массив обновляется?

Question

[helpmeplease196]

При нажатии кнопки send_button, массив должен добавлять каждый раз новое значение, взятое из value_input. Но каждый раз обновляется и выводит только последнее занесенное значение .

let body = document.querySelector(".task_body")
let num = 5/*+prompt()*/
let size_step=100/num        /*заменить на значение переменной*/
var root= document.querySelector(":root");
let step
let shift_right = 0
let k=0

let button= document.querySelector("button");
button.addEventListener("click",  create_step )
function create_step(){  
    if(k < num){ 
        k++
        step = document.createElement("div")
        body.append(step)
         step.style.width= size_step + "%"
         step.style.height=size_step + "%"
         step.style.backgroundColor="blue"
         step.style.position= "absolute"
         step.style.left=  shift_right + "%"
         step.style.bottom= shift_right + "%"
         shift_right= shift_right + size_step
      }}

      input_form=0     /* ?????? input_form ранее нигде не объявлено, но работает , если удалит 0 - не работает */

      let arr=[1,2,]   
      let value_input
      let k_id_create_input=0
let button_input =  document.getElementById("input_button")   
button_input.addEventListener("click", create_input)

function create_input(){
   
    input_form = document.createElement("form")    
    input_form.id="form"
    body.append(input_form);
    let new_input=document.createElement("input");
    input_form.append(new_input);
    new_input.id="new_input"
    new_input.setAttribute('type', 'text');
    new_input.setAttribute('value', 'tedfxt');
    k_id_create_input++
    let send_button = document.createElement("input")
    input_form.append(send_button)
send_button.id = "send"
send_button.style.position="absolute"
send_button.style.bottom="20px"
send_button.setAttribute('type', 'submit');


let form=document.getElementById("form")
form.addEventListener("submit", function(){
   value_input=document.getElementById("new_input").value
   arr.unshift(value_input)
   alert(arr)
})

}

Comments

[Tim]

button.addEventListener("click", create_step )
при каждом клике по кнопке внутри функции вы объявляете массив let arr=[1,2,];
при submit вы добавляете в этот массив значение
Мне кажется тут весь код не правильно реализован. Залейте полный код в песочницу

Answer 1

[Semantic.Moscow]

вы же каждый раз объявляете массив заново,
вместо того, чтобы использовать уже существующий

Comments

[helpmeplease196]

но ведь массив объявлен до функции. Внутри form.addEventListener к нему только добавляется значение. Разве нет?

[scottparker]

helpmeplease196, по идее let -> var. но сделано не очень

[helpmeplease196]

scottparker, неправильно потому что не верно объявлен массив, не в том месте?

[scottparker]

helpmeplease196, не понял вопроса)

[helpmeplease196]

scottparker, " но сделано не очень" поняла так, что в целом вся конструкция костыль, кторый будет держаться на var вместо let )

[scottparker]

helpmeplease196, это скорее про весь код в целом)

[helpmeplease196]

Извините, что достаю, но все же где бы не объявляла массив, не работает
https://codepen.io/anna55498489/pen/zYWPbMv
(при нажатии на старт и отправить массив должен пополнятся, но он обновляется.) Буду благодарна, если вы укажите где ошибка

Answer 2

[Даниил]

Вынесите создание массива за клик кнопки. Например, в самый верх страницы.

Comments

[helpmeplease196]

так тоже не работает, где бы не объявляла массив
https://codepen.io/anna55498489/pen/zYWPbMv
(при нажатии на старт и отправить массив должен пополнятся, но он обновляется.) Буду благодарна, если вы укажите где ошибка

Answer 3

[Khalit]

form.addEventListener("submit", function(ev){
   ev.preventDefault() 
   value_input=document.getElementById("new_input").value
   arr.unshift(value_input)
   alert(arr)
})

Первая строка внутри функции не позволит браузеру обновится и массив не сбросится