Не понимаю почему не работает клик по кнопке ,как исправить?

Question

[Closuha]

<div class="enter_values">
          <input type="text" id="input_age" value="AGE" />
          <input type="text" id="input_name" value="NAME" />
          <button id="add_button">ADD PERSON</button>
        </div>
        <div id="myList"></div>
      </div>

let personData = [{
        name: 'Arthur',
        age: 21
    },
    {
        name: 'Alex',
        age: 32
    },
    {
        name: 'Nix',
        age: 20
    },
]
window.onload = () => {
    loadListData(personData)
}

function loadListData(personData) {
    let myList = document.getElementById('myList')
    let dataHtml = ''
    for (let person of personData) {
        dataHtml += `
        <div class='table_row'>
            <div class='person_name'>${person.name}</div>
            <div class='person_age'>${person.age}</div>
        </div>
        `
    }
    myList.innerHTML = dataHtml;
    console.log(dataHtml)
}

let addButton = document.getElementById('add_button')
addButton.addEventListener("click", addPerson)

loadListData(personData)
let inputAge = document.getElementById('input_age').value
let inputName = document.getElementById('input_name').value

console.log(inputAge)


function addPerson(name, age) {
    // console.log('121')
    console.log(name)
    return {
        name: name,
        age: age

    }
}
console.log(addPerson(inputAge, inputName))
personData.push(addPerson('Lena', 21))
personData.push(addPerson(inputAge, inputName))

Как я понял,фукнция addPerson работает и создает объект ,но не работает момент когда считывается значение с инпутников

Answer 1

[historydev]

Вам нужно получать значение инпута непосредственно в событии, т.к. сейчас вы получаете его при загрузке страницы и естественно что там ничего нет:

function addPerson() {
personData.push({
        name: document.getElementById('input_name').value,
        age: document.getElementById('input_age').value

    });
}

Comments

[Closuha]

Спасибо.