change a variable in a nested function

Question

i am trying to change a variable in a nested function, it's a lot of code so here is a simplified build up of the JS file

var time = 0;

$("button").click(function(){
    time = time + 1
});

function thisIsTheTime(){
    clockDesign()   
    // big bunch of variables and more code
}

function clockDesign(){

  ProgressIndicator: {
   name: "ProgressIndicator",
   element: create_element_with_attributes("div", {
      innerHTML:
      "<div class='ProgressbarContainer' style='text-align: center;'>
      + time
      + </div>"
      })
   }

}

what i try to achieve is the following, update the time - each time a person clicks the button - in the second function ClockDesign() However this is rendered directly when the page loads. it keeps the 0.

You've declared var time outside those functions, so you can access and modify time from anywhere. Please post valid code that reproduces the problem, a minimal reproducible example. I suspect the problem here is that you expect the progress to magically update because you've changed the value of time; that's not going to happen. You have to manually update the HTML yourself. — user5734311
– user5734311, Commented Aug 7, 2019 at 18:15
How about add a line in the click event and update the content of the div? — Dale Nguyen
– Dale Nguyen, Commented Aug 7, 2019 at 18:15

Hakimuddin · Accepted Answer · 2019-08-07 18:19:33Z

2

You can try updating your click event with this -

        $("button").click(function(){
            time = time + 1
            $(".ProgressbarContainer").text(time);
        });

answered Aug 7, 2019 at 18:19

Hakimuddin

9010 bronze badges

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

Collectives™ on Stack Overflow

change a variable in a nested function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related