Wsrtjtyk

I stored dynamic variables in an object called newEvent. The variables values change, but when I store them in newEvent they keep the same value that they had when they were first loaded and they don't change values when they are updated. Here is my code

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();

 }); 

The only variables whose values are changing in newEvent are newEvent.title and newEvent.desc, which are html input's inside a form. Why is this happening and how can I get the changed valued of the variables?

The reason that title and description are the only values changing is because you're setting them in newEvent as the query selector result for their corresponding DOM element. Whereas the other values including month, year and active, are either strings or numbers/bools.

I changed my code to this

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

        }

    }

 };

and now the values are updating. It must be because when I declared the object keys I accessed the current value of the element before I changed it and it never updated when I call the submit function, but now the direct value or html of the element is only accessed when I call the newEvent.submit function and this is getting my changes to those elements.