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

Answer 1

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.