Javascript variable outside function?

Question

1| <script type="text/javascript">
2|    function more() {
3|          $("#innerSub2").animate({ scrollTop: "+=240px" },1000);
4|          var count = 1;
5|          document.getElementById("dot" +count).style.color="#c7c9e9";
6|          var count = count + 1;
7|          document.getElementById("dot" +count).style.color="#6464c1";
8|        }
9|     </script>

Helo, I'm pretty new to javascript. So sorry if this is a stupid question.
In the first click event, the variable works as I need (line 5, count = 1) (line 7, count = 2)
But on the second click of the event, I need (line 5, count = 2) (line 7, count = 3) but, as you can see, it resets to 1 with line 4.
So, the question is how can I declare | var count = 1; | outside the function there is more (), so it will not reset my variable? or if there is another way to do this.
Also, if there is a way to stop the number of variables from exceeding 3, please share them Thank you

Answer 1

, , , , , , javascript/jquery http://jqfundamentals.com/book/index.html#example-2.44

<script type="text/javascript">
   var count = 1;
   function more() {
         $("#innerSub2").animate({ scrollTop: "+=240px" },1000);          
         document.getElementById("dot" +count).style.color="#c7c9e9";
         count = count + 1; //removed the var word.
         document.getElementById("dot" +count).style.color="#6464c1";
       }
</script>

Answer 2

u

  var count = 1;
  function more() {
          $("#innerSub2").animate({ scrollTop: "+=240px" },1000);
          document.getElementById("dot" +count).style.color="#c7c9e9";
          count = (count>2)?3:(count+1);
          document.getElementById("dot" +count).style.color="#6464c1";
   }

Answer 3

 var count = 1;
 function more(count) {
          $("#innerSub2").animate({ scrollTop: "+=240px" },1000);
          document.getElementById("dot" +count).style.color="#c7c9e9";

          if(count < 3)
              count += 1;

          document.getElementById("dot" +count).style.color="#6464c1";

          return count;
    }



   then you just call more(count) on some event.

Answer 4

var , = 1, reset ' 1. :

var count = 1;
function more(){
    //js stuff animate
    count = count+1;
    //other js css
    count = count+1;
    //another js color
}

. 3, js js ? . 3, js :

var count = 1;
function more(){
    //js stuff animate
    if(count<3){count = count+1;}
    //other js css
    if(count<3){count = count+1;}
    //another js color
}

, , :

var count = 1;
function more(){
    if(count<3){
        //js stuff animate
        count = count+1;
        //other js css
        count = count+1;
        //another js color
    }
}

, , .

reset , var rhe, var, /. ,

function resetCount(){
    count = 1;
}

Answer 5

, Syred, DOM. :

<script type="text/javascript">
   var count = 1;
   function more() {
         $("#innerSub2").animate({ scrollTop: "+=240px" },1000);
         if (document.getElementById("dot" + count) != null) {
             document.getElementById("dot" +count).style.color="#c7c9e9";
             count = count + 1; //removed the var word. (could also use count++)
             if (document.getElementById("dot" + count) != null)
                 document.getElementById("dot" +count).style.color="#6464c1";
         }
   }
</script>

, , , .

Answer 6

- const.

var info=[0,1];

function addView(btnIndex, btn){
    const index=btnIndex;
    btn.on("click", function(d){
        console.log(info[index]);
    };

}