JavaScript question: running a function inside a function

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

JavaScript question: running a function inside a function

Post by Bethrezen »

Hi all

So I just ran in to an odd little glitch, I’m trying to do an onclick counter and as far as I can tell my code should work correct however for some bizarre reason I don’t understand the counter will only increment once. Anyone have any idea what’s going on and why I can’t get this thing to work correctly?

Here is a striped down version of what I’m working on.

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
</head>

<button type="button" id="counter">Counter</button>

<div id="count"></div>

<script>

var buttons = document.querySelectorAll("button");

for (i = 0; i < buttons.length; i++)
{
  buttons[i].addEventListener("click", outer)
} 

function outer(event)
{
  var id = event.target.id;

  if(id == "counter")
  {
    var counter = 0;
    document.getElementById("count").innerHTML = counter;

    function increment()
    {
      counter = counter + 1;
      document.getElementById("count").innerHTML = counter;
    }

    document.getElementById("counter").onclick = increment;
  }
}

</script>

</body>
</html>
My best guess as to what’s wrong is that I’m not calling the increment function correctly and this is conflicting with click event that I already have set on the outer function because if I move all the code inside the if statement outside of the outer function then everything works as expected.

So if I’m right about what’s wrong how then do I fix this because I have tried several different ways of calling the increment function and none of them work so clearly I’m missing something here.
User avatar
jscher2000
Posts: 11734
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: JavaScript question: running a function inside a functio

Post by jscher2000 »

When I check the Page Inspector tool and click the Event badge next to the button:

(A) After load, one event is listed (outer())

(B) After the first click, two events are listed (outer() and increment())

Try putting

var counter = 0;

before function outer() so it is shared between the two functions rather than reset on every run.
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: JavaScript question: running a function inside a functio

Post by Bethrezen »

As it turns out I was simply doing the task incorrectly and didn’t need the second function what I should have been doing was this.

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
</head>

<button type="button" id="counter">Counter</button>

<div id="count"></div>

<script>

var buttons = document.querySelectorAll("button");

for (i = 0; i < buttons.length; i++)
{
  buttons[i].addEventListener("click", increment)
}

var counter = 0;

function increment(event)
{
  var id = event.target.id;

  if(id == "counter")
  {
      counter = counter + 1;
      document.getElementById("count").innerHTML = counter;
  }
}

</script>

</body>
</html> 
Locked