메뉴 건너뛰기

조회 수 428 댓글 1

<!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:레퍼런스가 잘못됬다고 하는것 같습니다.)가 뜹니다. 어디가 잘못된건지 이해가 잘안됩니다..
그리고 저문장을 고치면 실행이 될까요?? 아니면 다시 공부해야할까요?? 궁금합니다. ㅠ

?
  • ?
    관리자 2018.05.20 23:58

    열심히 공부하시는군요!

    프로그램에서우선 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>
    ...

    이들을 고치고 다시 해보세요,


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18174
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 692
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 350
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로