클릭 자바 스크립트를 기다리지 않고 클릭하십시오.

몇 초마다 텍스트의 색상을 변경하기 시작하는 버튼을 만들었습니다. 코드는 색상을 변경하지만 페이지가로드 될 때 바로 발생하며 사용자가 색상을 변경하기 위해 버튼을 클릭 할 때까지 기다리지 않습니다. 여기 내 코드가있다. 설명해 주시고 사용자가 버튼을 클릭 할 때만 코드를 실행하는 방법을 알려주십시오.클릭 자바 스크립트를 기다리지 않고 클릭하십시오.

<!DOCTYPE html> 
<body> 

<style> 
#woo{ 
color: green; 
} 

#woot{ 
color: orange; 
} 
</style> 

<button onClick="onChange()">SWAG</button> 
<p id="woo">WAM</p> 


<script> 
setInterval(function(){onChange()}, 2000); 


function onChange(){ 
    document.getElementById("woo").id = "woot"; 
    setTimeout(function(){ 
     document.getElementById("woot").id = "woo"; 
    }, 1000); 
} 

</script> 
</body> 
</html>

제 질문에 답변 해 주실 수 있으면 알려주세요.

출처

2014-02-20 Mattattack

당신은 실행하고'의 onChange()의''에서는 setInterval에서') (페이지가로드 될 때를, 그래서 사용자 작업을 기다릴 것입니다 이유가 없다 : 나는 setInterval 전화를 삭제할 경우,이 예제를 참조하십시오 . –

@cookiemonster처럼 당신은 _explicitly_ 이것을 요구하고 있습니다. 이것은'setInterval (function() {onChange()}, 2000);이하는 일입니다. –

setInterval()으로 전화하는 즉시 버튼에 관계없이 onChange()을 2 초마다 실행하도록 요청할 것입니다.

시도 뭔가 같은 :

<style> 
    #woo.green { 
     color: green; 
    } 

    #woo.orange { 
     color: orange; 
    } 
</style> 

<button onClick="startChange()">SWAG</button> 
<p id="woo" class="orange">WAM</p> 
<script> 
    var intervalRef; 
    var green = false; 

    function startChange() { 
     intervalRef = setInterval(function() { doChange(); }, 1000); 
    } 

    function stopChange() { 
     clearInterval(intervalRef); 
    } 

    function doChange() { 
     var el = document.getElementById("woo"); 
     if (green) { 
      el.className = "orange"; 
      green = false; 
     } else { 
      el.className = "green"; 
      green = true; 
     } 
    } 
</script>

출처

2014-02-20 22:17:25 Tom

정말 고마워! – Mattattack

당신이해야 할 모든 setInterval에 전화를 제거합니다. 귀하의 onclick 처리기가 좋습니다.

http://jsfiddle.net/U6Z8F/

출처

2014-02-20 22:17:51 mchail

감사합니다, 지금 완벽하게 작동합니다! – Mattattack

클릭 자바 스크립트를 기다리지 않고 클릭하십시오.

답변

관련 문제