Issue with global variables when using event handlers(basic Javascript)

Question

Recently i got stuck on an issue when using DOM event handlers. Next i´ll describe the problem related stuff:

The code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form >
        <input id="b1" type="submit"  value="Click" />

    </form>

    <script>
       //global variable 
       var v= 0;

       var b1= document.getElementById("b1");

       b1.addEventListener("click", f1, false);

       function f1() {
           window.alert(++v);
       }

    </script>

</body>
</html>

How the code should work?

When the button(b1) is pressed, the global variable(v) increases its value progressively for each new click of the button.The window will alert the new value.

The problem:

The variable doesnt keep its latest value.For example, when i click the button twice, the window should alert 2 but instead im still getting 1.

Assertions:

The global variable(v) should keep the changes done to it inside a function.This is due the fact that im using it directly on the function,without using an argument.

Notes:

When i invoke the function twice directly on the code it works correctly(instead of the handler).

f1();//1

f1();//2
I´ve tested it with Chrome and Firefox.

So, what´s happening here? why doesn´t it works correctly? does the event handler works differently with the global variables?

Hope you guys can help me! Thanks!

@torazaburo: function declarations are hoisted.

Felix Kling
– Felix Kling

2014-10-04 07:55:48 +00:00
Commented Oct 4, 2014 at 7:55 — Felix Kling
– Felix Kling, Commented Oct 4, 2014 at 7:55

Bjorn · Accepted Answer · 2014-10-05 04:30:15Z

3

You need to add a form onsubmit handler that cancels the submit. The value is being reset because the page reloaded.

<form onsubmit="return false;">
    <input id="b1" type="submit"  value="Click" />

</form>

That would do it.

Here's a jsfiddle. Try removing and adding the onsubmit handler to see it more clearly on the jsfiddle.

You could optionally also switch the click event out for an onsubmit on the form and use preventDefault on your onsubmit event instead of using the onsubmit in the HTML, at least in modern browsers. In older versions of IE you had to do it a little differently.

   function f1(event) {
       event.preventDefault();
       window.alert(++v);
   }

edited Oct 5, 2014 at 4:30

answered Oct 4, 2014 at 5:29

Bjorn

72.4k40 gold badges140 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user603284 Over a year ago

It's not good practice to put JavaScript event handlers directly in the HTML.

user603284 · Accepted Answer · 2014-10-04 06:00:08Z

0

This issue is that the submit button is submitting your form, most likely causing the page to refresh and reset v to 0. You can prevent this behaviour with the preventDefault method on the event object that gets passed to your callback function:

//global variable 
var v= 0;

var b1 = document.getElementById("b1");
b1.addEventListener("click", f1, false);

// e is the event object
function f1(e) {
    // calling preventDefault will prevent the form from being submitted
    e.preventDefault();
    console.log("b1 click", ++v)
}

Just a stylistic note, it's confusing to use ++v. You're better off using v += 1;

answered Oct 4, 2014 at 6:00

user603284

Comments

Felix Kling · Accepted Answer · 2014-10-04 07:54:34Z

0

As already established, you are seeing this behavior because clicking the button submits the form and reloads the page.

The simplest solution is to remove the <form> element.

answered Oct 4, 2014 at 7:54

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

Issue with global variables when using event handlers(basic Javascript)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related