How to pass objects to functions in javascript between different click events?

Question

Why is this code indicating that my object's properties are undefined?

document.getElementById("mkObj").addEventListener('click', () => {

        var globalDragon = mkObj(document.getElementById("cn").value, parseInt(document.getElementById("ch").value), document.getElementById("cl").value);

        document.getElementById("hit").addEventListener('click', (globalDragon) => {

            hit(globalDragon, 25);

            printObjDetails(globalDragon);

        });

        document.getElementById("details").addEventListener('click', (globalDragon) => {

            let dragon_here = globalDragon;


            printObjDetails(dragon_here);

        });

    });

Why can't I just make the Dragon object by clicking the mkObj button and then click the hit button or details button and have it show the object's state? Why is it showing that globalDragon.name is undefined?

I had the code looking like this before and it did not work either so I just make everything be within the mkObj click scope, thinking that that would solve the issue but it didn't:

document.getElementById("mkObj").addEventListener('click', ()=>{

    var globalDragon = mkObj( document.getElementById("cn").value, parseInt( document.getElementById("ch").value), document.getElementById("cl").value );

     });
    document.getElementById("hit").addEventListener('click', (globalDragon)=>{

    hit(globalDragon, 25);

    printObjDetails(globalDragon);

     });

    document.getElementById("details").addEventListener('click', (globalDragon)=>{

    let dragon_here = globalDragon;


    printObjDetails(dragon_here);
    
     });

Adding event listeners inside other event listeners is almost always questionable if not a mistake. The .addEventListener() call does not remove already-added listeners, so when a "click" happens all added listeners will run. — Pointy
– Pointy, Commented Dec 9, 2021 at 2:33
you're defining a var variable in the scope of that click listener - globalDragon doesn't exist outside of that function and will be undefined in your other click listeners — Kinglish
– Kinglish, Commented Dec 9, 2021 at 2:37
@Kinglish It's worse than that. globalDragon is redefined as a parameter. So, within the listener, globalDragon is an event object. — Geoduck
– Geoduck, Commented Dec 9, 2021 at 2:39
As @GarrGodfrey points out you need to go back to the documentation of addEventListener. You can't arbitrarily change the callback arguments to something else. Lots of issues to sort out in this code — charlietfl
– charlietfl, Commented Dec 9, 2021 at 2:41
so there is no way to click a button and bring a global object into existence and then do whatever you want to it via other event handlers? e.g. pass it to functions, print it, etc. — Mr.Green
– Mr.Green, Commented Dec 9, 2021 at 3:25

Bergi · Accepted Answer · 2021-12-09 04:18:31Z

I believe what you actually want is

// declare the variable in the top scope,
// so that all three click handlers can access it
var globalDragon;

document.getElementById("mkObj").addEventListener('click', () => {
    // write a new object into the global variable
    globalDragon = mkObj(
        document.getElementById("cn").value,
        parseInt( document.getElementById("ch").value),
        document.getElementById("cl").value
    );
});

document.getElementById("details").addEventListener('click', () => {
    // read from the global variable
    printObjDetails(globalDragon);
});

document.getElementById("hit").addEventListener('click', () => {
    // modify the object
    hit(globalDragon, 25);
    printObjDetails(globalDragon);
});

Notice how I removed the parameters of the functions that were also named globalDragon. The event handlers get passed an event object as their arguments.

Collectives™ on Stack Overflow

How to pass objects to functions in javascript between different click events?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related