¿Variable de Javascript fuera de la función?

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, soy bastante nuevo en javascript. Lo siento si esta es una pregunta estúpida.
En el primer clic, la variable funciona como la necesito (línea 5, recuento = 1) (línea 7, recuento = 2)
Pero en el segundo clic, necesito el evento (línea 5, recuento = 2) (línea 7, count = 3) pero como puede ver, se restablece a 1 con la línea 4.
Entonces la pregunta es, ¿cómo puedo declarar | var count = 1; | fuera de la función más() por lo que no restablecerá mi variable? o si hay alguna otra manera de hacer esto ..
También si hay una manera de detener el recuento variable superior a 3, por favor comparten
Gracias

Answer 1

Se puede definir una variable fuera de su función, así que no lo puedo borrar, de esta manera el alcance de la variable será global, habiendo una gran cantidad de variables globales se considera que no es una buena práctica se puede aprender más sobre el alcance y JavaScript/conceptos básicos de jQuery en este libro 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

Exactamente cómo escribió

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

Desde el var es función de su interior, y que está poniendo a = 1, será siempre 'reset' a 1. Lo que hay que hacer es:

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

Ésta es la utilización de su estructura. ¿Desea dejar de contar después de 3, pero aún las otras js funcionan o js deja de funcionar también? Permite hacer ambos como ejemplo. 3, pero todavía funcionan 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 
} 

si desea que todo deja de funcionar,:

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

Hay mejor forma de presentar pero utilicé su estructura de código por lo que podría entender mejor.

Si alguna vez necesita restablecer el conteo en la misma página, dado que la var está fuera de la función, es una var global para que otras funciones puedan acceder/modificar. Por ej.

function resetCount(){ 
    count = 1; 
} 

Answer 5

Además, para agregar a la respuesta de Syred, debe poner algo de error en la comprobación de las llamadas al objeto DOM. Por ejemplo:

<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> 

Si supiera más sobre la forma en que estaba utilizando la función, que podría hacer otras recomendaciones sobre la manera de simplificar y comprobar si hay errores, pero esto debe darle una buena idea.