2016-06-15 3 views
1

이것은 정말 놀랍니다.자바 스크립트에서 var 키워드로 함수 밖의 변수 선언하기

JavaScript 키워드를 사용하여 이미지를 클릭 할 때 원본 속성을 변경하려고합니다.

내가 본 일부 비디오가 도움이되었지만 사용 된 방법은 정말 혼란 스럽습니다.

여러분 중 한 명은 나에게이 사실을 설명해주십시오.

<html> 
    <head> 
     <script> 
      var image_tracker = 'p'; 
      function change() { 
       var image = document.getElementById('pics'); 
       if (image_tracker == 'p') { 
        image.src = 'Tulips.jpg'; 
        image_tracker = 't'; 
       } else { 
        image.src = 'Penguins.jpg'; 
        image_tracker = 'p'; 
       } 
      } 
     </script> 
     <title></title> 
    </head> 
    <body> 
     <h1>JavaScript Tutorial</h1> 
     <img src="Penguins.jpg" alt="pics" id="demo" onclick="change();"> 
    </body> 
</html> 

실제로 혼란스러운 점은 함수 내부에 추적 변수를 선언 할 수 없다는 것입니다.

실제로 함수 내에서 선언을 시도했지만 작동하지 않았습니다.

제발 잘 모르는 사람들에게 알려주세요.

내 실제 혼란은 왜 함수 내에서 변수 추적기를 선언 할 수 없다는 것입니까?

하는 코드를 신경 쓰지 마십시오, 내 혼란은 당신이 다음 기능을 실행할 때마다, '추적자'는 모든

+3

먼저,'function' 이름이 없습니다. 둘째, 원하는 동작을 설명하고 이해하는 데 도움이되는 HTML을 게시하십시오. –

+0

답변 해 주셔서 감사합니다. – pedroyanky

답변

-1

입니다, 함수 이름을 추가하십시오.

함수 내에서 변수 선언이 작동하지 않는 이유는 함수를 호출 할 때마다 변수가 원래 값, 즉 t으로 재설정되기 때문입니다. 이 값을 여러 함수 호출에서 지속되도록하려면 함수의 다음 호출에서 마지막으로 저장된 값을 얻을 수 있도록이 값을 어딘가에 저장하는 몇 가지 방법이 필요합니다.

var 키워드없이 함수 내에 변수를 정의 할 수 있습니다. 이것은 세계화 될 것입니다. 나는 그것이 당신의 문제에 대한 최선의 접근법이 아닌 것은 확실하지만, 그것이 효과가있을 것입니다. 당신이 전역 변수로 tracker을하지 않으려 경우

function change() { 
    tracker = 't'; 
    var image = document.getElementById('img'); 

    if (tracker == 't') { 
    image.src = 'photo.jpg'; 
    tracker = 'f'; 
    } else { 
    image.src = 'picture.jpg'; 
    tracker = 't'; 
    } 
} 

는 다른 접근 방식은 img 태그 자체의 data 속성으로 값을 저장 할 수 있습니다. 따라서 함수를 실행할 때마다 먼저 속성 값을 가져 와서 그에 따라 코드를 실행 한 다음 속성에 새 업데이트 된 값을 저장하십시오.

<img data-tracker="t" src="Penguins.jpg" alt="pics" id="demo" onclick="change();"> 

function change() { 
    var image = document.getElementById('img'); 
    var tracker = image.getAttribute("data-tracker"); 

    if (tracker == 't') { 
    image.src = 'photo.jpg'; 
    // tracker = 'f'; 
    image.setAttribute("data-tracker", "f"); 
    } else { 
    image.src = 'picture.jpg'; 
    // tracker = 't'; 
    image.setAttribute("data-tracker", "t"); 
    } 
} 
1

먼저 init이 될 것이다 내부를 정의하면 바로 변수 선언

+1

'var'을 사용하지 않는 것이 나쁜 습관 임에도 불구하고, "왜 내부가 선언되지 않는가"라는 대답을하지 못합니다 ... –

+1

Thanks @ ADreNaLiNe-DJ. 그것을 포함하도록 내 대답을 편집했습니다. –

+0

'tracker'를 전역 변수로 사용하지 않으려면 다른 방법으로 값을'img' 태그 자체에'data' 속성으로 저장할 수 있습니다. 따라서 함수를 실행할 때마다 먼저 속성 값을 가져 와서 그에 따라 코드를 실행 한 다음 속성에 새 업데이트 된 값을 저장하십시오. 어떻게 가능합니까? – pedroyanky

3

다음 함수 호출의 값을 유지하기 위해 함수 외부 변수를 선언합니다.

당신이 값이 다음 함수 호출에 재설정됩니다보다는 함수 내에서 선언하는 경우 : 모든

var trigger1 = 'f'; 
 

 
function testTrigger() { 
 
    var trigger2 = 'f'; 
 
    console.log('Trigger 1: ' + trigger1 + ' | Trigger 2: ' + trigger2); 
 
    
 
    if (trigger1 == 't') { 
 
    trigger1 = 'f'; 
 
    trigger2 = 'f'; 
 
    } else { 
 
    trigger1 = 't'; 
 
    trigger2 = 't'; 
 
    } 
 
} 
 

 
testTrigger(); 
 
testTrigger(); 
 
testTrigger(); 
 
testTrigger();

관련 문제