자바스크립트 마우스 오버시 오버한 버튼의 아이디값 출력 질문입니다.
글쓴이: chief / 작성시간: 수, 2013/06/05 - 3:47오후
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이벤트 리스너추가 1</title>
<style type="text/css">
</style>
</head>
<body>
<h1>돔레벨 0 방식</h1>
<button type="button" id="btn1" title=""><span>마우스 오버</span></button>
<button type="button" id="btn2" title=""><span>마우스 클릭</span></button>
<button type="button" id="btn3" title=""><span>마우스 오버</span></button>
<button type="button" id="btn4" title=""><span>마우스 클릭</span></button>
<script type="text/javascript">
window.onload = function() {
// 돔레벨 0 방식
var i = window.document.getElementsByTagName('button');
var j;
var x;
for (j=0; j < i.length; j++ ){
x = document.getElementById(i[j].getAttribute('id')).getAttribute('id');
alert(x);
i[j].onmouseover = function() {
alert(x);
}
}
}
</script>
</body>
</html>안녕하세요.
자바스크립트 완전 초짜입니다.
위와같이 코드를 짜고 파이어폭스로 실행하면
자동으로 alert 에 버튼 4개에 대한 아이디가 연달아 나오기까지는 됩니다.
그런데 특정 버튼에 마우스를 올리면 그 버튼의 아이디값이 아닌 맨 마지막 아이디값인
btn4 만 출력이 됩니다. 1시간째 헤메도 해결못하였습니다 ㅠ.ㅠ 혹시 방법 아시는 분 가르켜주심
감사하겠습니다.
Forums:
저것만 보시면
x의 값을 스스로 계속 갱신해주시는데요? 결국은 마지막 element의 value가 x에 들어가고 끝났네요
x의 변수도 j를 이용하여 배열로 하나씩 집어넣으셔야 할 것 같습니다..
closure에 대해 찾아보세요.
x가 function() 바깥에서 선언되어서 그렇습니다.
i[j].onmouseover = function(v) { return function() { alert(v); } }(x);
와 같이 하면 될 거 같네요.
댓글 달기