Q&A
책을 따라하다가 막히는 부분이 있나요?
질문을 남겨주세요.
이 페이지는 의견 교환을 위해 따로 만든 페이지입니다. 책에서 이 페이지를 만드는 법을 직접적으로 다루지는 않습니다.
하지만, 책을 끝까지 읽고 나면 이 페이지도 만드실 수 있을거에요.
하지만, 책을 끝까지 읽고 나면 이 페이지도 만드실 수 있을거에요.
03-3 자바스크립트 예제가 안돼요. (독자 질문)
3 years, 9 months ago
sungyong
어제 새벽에 독자 분께서 아래와 같은 소스코드를 보여주시면서, 동작이 되지 않는다고 질문하셨습니다.
개인적으로 답변을 드렸습니다만, 다른 분들도 비슷한 실수를 하실 수 있다고 생각해서 여기 게시판에 글을 남깁니다.
<!DOCTYPE html>
<html>
<head>
<title>의 홈페이지</title>
<script type="text/javascript">
function caculate(){
let a = document.getElementById('inputA').value;
let b = document.getElementById('inputB').value;
document.getElementById('valueA').innerHTML = a;
document.getElementById('valueB').innerHTML = b;
document.getElementById('valueC').innerHTML = Number(a) + Number(b);
}</script>
</head>
<body>
<input id="inputA" value=1 onkeyup="caculate()">
<input type="inputB" value=2 onkeyup="caculate()" >
<p><span id="valueA">1</span> + <span id="valueB">1</span> = <span id="valueC">1</span> 입니다 </p>
</body>
</html>
목록보기
sungyong 3 years, 9 months ago
자바스크립트를 이용해 페이지를 만들었을 때, 잘 안된다면, 브라우저 상에서 F12를 눌러보세요.
오른쪽 혹은 아래쪽에 개발자 도구가 열립니다.
두 입력 칸 중, 한 군데의 값을 수정하자 위와 같이 빨간색으로 오류 메시지가 나타납니다.
잘 읽어보니, 8번째 줄에서 null의 'value' 값을 읽을 수 없다. (Cannot read property 'value'of null) 이라고 안내하고 있습니다.
8번째 줄을 보면, 아래와 같은 코드가 적혀있습니다.
let b = document .getElementById('inputB').value ;
inputB라는 id를 가진 element에서 value 값을 변수 b에 담으라는 의미입니다.
그런데, 이 html 문서에는 id가 inputB인 요소(element)가 없습니다. 왜냐하면 id="inputB"라고 하지 않고, 독자님께서 실수로 type="inputB"라고 했기 때문이죠.
따라서 type="inputB"를 id="inputB"로 수정하면 문제없이 작동합니다.
Updated: Feb. 3, 2021, 12:11 a.m.
Leave a Comment: