MozillaZine


JavaScript question: running a function inside a function

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

Post Posted December 16th, 2021, 3:47 pm

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.

jscher2000

User avatar
 
Posts: 11573
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted February 1st, 2022, 10:48 pm

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: 421
Joined: September 13th, 2003, 11:56 am

Post Posted February 25th, 2022, 10:12 am

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>

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest