<!DOCTYPE HTML>
<html>
<head>
<meta charst="UTF-8">
<title>9-8(이벤트 객체의 target)</title>
</head>
<body>
<script>
function init(){
var text = document.getElementsByTagName("li");
for(i=0; i<text.length; i++) {
text[i].addEventListener("click", click, false);
}
}
function click(e){
var n=0;
switch(e.target.id) {
case "0" : n = 0; break;
case "1" : n = 1; break;
case "2" : n = 2; break;
case "3" : n = 3; break;
}
Stronger(text[n],e);
}
function Stronger(text, e){
text.style.font-size=1.3em;
}
</script>
<h3>아이템을 클릭하면 1.3배 크기로</h3>
<hr>
<p>여름 방학 때 하고 싶은 것들
<ul onload="init()">
<li id='0'>자전거로 대한민국 일주</li>
<li id='1'>책 100권 읽기</li>
<li id='2'>철인 3종 경기 준비</li>
<li id='3'>자바스크립트 정복</li>
</ul>
</body>
</html>
이같이 실행해본 결과 text.style.font-size=1.3em; 이 문장이 assign이 안된다고 에러(Uncaught ReferenceError: Invalid left-hand side in assignment:레퍼런스가 잘못됬다고 하는것 같습니다.)가 뜹니다. 어디가 잘못된건지 이해가 잘안됩니다..
그리고 저문장을 고치면 실행이 될까요?? 아니면 다시 공부해야할까요?? 궁금합니다. ㅠ
열심히 공부하시는군요!
프로그램에서우선 3가지 오류가 보입니다. 다른 오류가 더 있는지 모르겠지만...
1. text.style.font-size=1.3em;
CSS3 스타일이 DOM 객체의 프로퍼티로 사용될 때는 하이픈(-)를 없애고 다음과 같이 씁니다(교재 p.359 참고).
text.style.fontSize=1.3em;
그리고 1.3em은 문자열로 나타내어 다음이 최종적으로 옳은 표현입니다.
text.style.fontSize="1.3em";
2. Stronger(text[n],e);
text 변수는 init() 함수 내에서 선언되었기 때문에 init() 함수 내에서만 사용됩니다. 그러므로
click() 함수에서는 사용할 수 없습니다. 다향히 e.target이 바로 현재 사용자가 클릭한 DOM 객체이므로
이를 다음과 같이 고치면 됩니다.(교재 p.397 참고)
Stronger(e.target,e);
3. <ul onload="init()">
onload 이벤트가 발생하는 곳은 <body> 태그여야 하므로 다음과 같이 수정되어야 합니다.(교재 p.411 참고)
<body onload="init()">
...
<ul>
...
이들을 고치고 다시 해보세요,