Using id variable from event listener

JavaScript
1

Hi,
I am trying to access a variable outside of an if statement. The variable is the id of a button obtained using an event listener.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student of the Day</title>
    <style>
    body{
        background-color: rgb(207,218,224);
    }
    div{
        display: inline-block;
        vertical-align: top;
        border: 3px solid rgb(83,95,128);
        border-radius: 6px;
    }
    table{
        background-color: rgb(167,188,188);
        border-radius: 3px;
    }
    button{
        border: 3px solid rgb(83,95,128);
        background: rgb(139,167,180);
        border-radius: 6px;          
    }

    </style>
</head>
<body>
<% 3 %>
    <img src="http://latex.codecogs.com/gif.latex?\frac{1+sin(x)}{tan(x)}" border="0"/>
    <div>
        <table>
            <tr>
                <!-- <td>Sashasss</td><td><button id="student1up" onclick="move(this);">Up</button></td> -->
                <td>Sashasss</td><td><button id="student1up">Up</button></td>
                <td><button id="student1down">Down</button></td>
            </tr>
            <tr>
                <td>Dasha</td><td><button id="student2up">Up</button></td>
                <td><button id="student2down">Down</button></td>
            </tr>
        </table>
    </div>
        <script type="text/javascript">
                    thing = new Object();
                    document.body.addEventListener("click", function(event) {
                    if (event.target.nodeName == "BUTTON")
                    thing = {num: event.target.id};
                    console.log("Inside if: ", thing.num);
                    });
                    console.log("Outside if: ", thing.num);//why can I not read thing.id outside the if() statement?
        </script>
</body>
</html>

In the console I am getting,

Outside if: undefined

I am guessing that this may be a scope issue. If so how can I solve it?

Thanks

2

Your if statement has no braces, so only the immediately following line will be affected by the if statement.

if (event.target.nodeName == "BUTTON")
    thing = {num: event.target.id}; // inside if statement
console.log("Inside if: ", thing.num); // not in if statement

Always use braces on your if statements to ensure that such problems can not occur.

if (event.target.nodeName == "BUTTON") {
    thing = {num: event.target.id}; // inside if statement
    console.log("Inside if: ", thing.num); // also inside if statement
}
3

Hi,
Yes of course I did forget that without braces the if statement only applies to the line immediately after it.
Now I have,

                thing = new Object();
                document.body.addEventListener("click", function(event) {
                    if (event.target.nodeName == "BUTTON"){
                        thing = {num: event.target.id};
                        console.log("Inside if: ", thing.num);
                    }
                });
                console.log("Outside if: ", thing.num);//why can I not read thing.id outside the if() statement?

But still the “outside if:” is undefined.

Thanks

4

that’s because thing is local to the event handler, and hence does not exist in the outer scope.

5

ofeyofey, remember that all the code inside the click event handler doesn’t execute right away. It won’t execute until you click somewhere on the body. Meanwhile, your “Outside if” statement, which isn’t part of the event handler code, executes right away, before thing.num has been set to anything.

6

Ok, got it. Thanks Dormilich

Yes of course, I didn’t notice that.

Kind of got it to work now with, by calling a function inside the if().

 thing = new Object();
                    document.body.addEventListener("click", function(event) {
                        if (event.target.nodeName == "BUTTON"){
                            thing = {num: event.target.id};
                            console.log("Inside if: ", thing.num);
                            outside();
                        }
                    });
                    var outside = function(){
                    console.log("Outside if: ", thing.num);//why can I not read thing.id outside the if() statement?
                }

Thanks

7

You have moved the content of the outside() function inside of the if statement by calling it from there.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.