HTML5 및 Javascript - 함수가 한 번만 작동하는 것으로 나타납니다.

남자, 나는 HTML5 및 javascript로 arround를 재생 중입니다. 현재 만들고있는 것은 다음과 같습니다. 화면에 자주색 블록이 있으며 버튼을 클릭하면 오른쪽으로 100 픽셀 이동합니다. 이것은 지금까지는 작동하지만 함수는 처음 실행될 때만 작동합니다. 내 벌레를 못 찾는다. 당신이 그와 같은 추가 기능을 수행 할 때, 그 사실은 단지 새로운 문자열을 만들고, 값을 추가하지HTML5 및 Javascript - 함수가 한 번만 작동하는 것으로 나타납니다.

<!doctype html> 
<head> 
<style> 
#stage{ 
    position: relative; 
    width : 800px; 
    height : 600px; 
    background: #c0c0c0; 
    border: 1px dashed black; 
} 

.coil{ 
    width: 64px; 
    height: 64px; 
    background: #800080; 
    position: absolute; 
    top: 200px; 
    left: 50px; 
} 
</style> 
</head> 


<body> 
<div id="stage"> 
<div class="coil"></div> 
<button id="button1">move!</button> 
</body> 
<script> 
var coil = document.querySelector(".coil"); 
var button = document.querySelector("#button1"); 
button.addEventListener("click", clickHandler2, false); 

//why is it working correctly just once 
function clickHandler2() 
{ 
    coil.style.left += 100 + "px"; 
} 
</script>

출처

2013-05-17 Bloodcount

때마다 당신은'coil.style.left' 속성에 문자열 '100 픽셀'을 추가하고 있습니다. 그래서 두 번째 클릭에는 유효하지 않은 CSS가 있습니다. – XGundam05

좋아, 어떻게 해결할 수 있습니까? – Bloodcount

몇 가지 메모 : 1. 당신은'html' 태그가 없습니다. 2. 당신은'# stage' 태그를 닫지 않습니다. 3.'body' 외부에'script'를 넣으면 HTML에 의해 유효하지 않습니다. –

nycynik이 언급했듯이 문자열 추가에 대해 조금 부주의합니다.

이 시도 :

function clickHandler2() 
{ 
    var before = parseInt(coil.style.left); 
    before = isNaN(before) ? 0 : before; 
    coil.style.left = before + 100 + "px"; 
}

출처

2013-05-17 16:44:33

감사합니다. 시스템에서 허용 할 때 답변으로 표시하겠습니다. – Bloodcount

다음은 작동 방식입니다. http://jsfiddle.net/FAf4Q/ (약간의 튜닝 필요) – WheretheresaWill

나는 (자바 스크립트, HTML과 CSS) 전체 소스 코드를 게시하고; 버튼에 console.log를 추가하면 볼 수 있습니다.

console.log(coil.style.left += 100 + "px");

출력은 "100px100px"

하나 개의 대안 솔루션 :

var coilPos = 100; 
//why is it working correctly just once 
function clickHandler2() 
{ 
    coilPos += 100; 
    coil.style.left = coilPos + "px"; 
    console.log(coil.style.left += 100 + "px"); 
}

출처

2013-05-17 16:43:31 nycynik

당신은 폐쇄를 사용해야합니다. 클로저 컨텍스트의 변수는 왼쪽 값을 유지해야합니다. 그런 다음 사용하는 속성에 값을 적용 할 때

var actualLeft + = 100; coil.style.left = actualLeft + "px";

출처

2013-05-17 16:44:31 Fico

HTML5 및 Javascript - 함수가 한 번만 작동하는 것으로 나타납니다.

답변

관련 문제