Динамические переменные хранятся в объекте, значение которого не обновляется при изменении

Question

Я хранил динамические переменные в объекте с именем newEvent. Значения переменных меняются, но когда я сохраняю их в newEvent, они сохраняют то же значение, которое они имели при первой загрузке, и не меняют значения при обновлении. Вот мой код

let headerMonths = document.getElementsByClassName('month')[0];
let headerYears = document.getElementsByClassName('year')[0]; 

let newEvent = {
    // day: parseInt(event.innerHTML),
    title: document.querySelector('#new-event-title'),
    desc: document.querySelector('#new-event-desc'),
    month: headerMonths.innerHTML,
    year: headerYears.innerHTML,
    active: document.getElementsByClassName('active')[0],
    submit: ()=>{
        if(newEvent.title.value.length===0){
            console.log('sasc');
            newEvent.title.classList.add('error');
        } else if(newEvent.desc.value.length===0) {
            newEvent.desc.classList.add('error');
        } else {
            newEventJson(newEvent.title.value, newEvent.desc.value, newEvent.month, newEvent.year, newEvent.active.innerHTML);
        }
    }
 };

 document.querySelector('#submit-event').addEventListener('click', (e)=>{
    e.preventDefault();
    newEvent.submit();
 }); 

Единственными переменными, значения которых меняются в newEvent, являются newEvent.title и newEvent.desc, которые являются входными данными html внутри формы. Почему это происходит и как я могу получить измененные значения переменных?

Answer 1

Я изменил свой код на это

let newEvent = {
    // day: parseInt(event.innerHTML),
    title: document.querySelector('#new-event-title'),
    desc: document.querySelector('#new-event-desc'),
    month: headerMonths,
    year: headerYears,
    active: document.getElementsByClassName('active'),
    submit: ()=>{
        if(newEvent.title.value.length===0){
            console.log('sasc');
            newEvent.title.classList.add('error');
        } else if(newEvent.desc.value.length===0) {
            newEvent.desc.classList.add('error');
        } else {
            newEventJson(newEvent.title.value, newEvent.desc.value, newEvent.month.innerHTML, newEvent.year.innerHTML, newEvent.active[0].innerHTML);
        }
    }
 };

и теперь значения обновляются. Это должно быть потому, что когда я объявлял ключи объекта, я обращался к текущему значению элемента до того, как изменил его, и он никогда не обновлялся, когда я вызываю функцию submit, но теперь прямое значение или html элемента доступно только тогда, когда я вызываю newEvent.submit функция, и это получает мои изменения этих элементов.

Answer 2

Причина, по которой заголовок и описание являются единственными изменяющимися значениями, заключается в том, что вы устанавливаете их в newEvent как результат селектора запроса для соответствующего элемента DOM. Принимая во внимание, что другие значения, включая месяц, год и активный, являются либо строками, либо числами / bools.