-
201203_TILTodayILearned/TILWIL 2020. 12. 4. 00:03
- 자바스크립트 조건문에 대해 공부했다.
- 주어진 예시를 활용해 내 코드로 다시 작성해봤다.
- 우선 예시에서는 html내에 script를 삽입했는데, 이부분 부터 분리해서 작업을 했다.
- 자바스크립트 코드를 짜면서 이전에 공부했던것들이 떠올라서 엄청 뿌듯했다.
- 나는 addEventListner만 사용해봤는데, 예시의 "onclick"또한 이벤트리스너의 click과 같은 기능이라고한다.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>isHighPressure</title> </head> <body> <div> 수축기 최고 혈압 <input type="number" id="highPressure"> </div> <div> 이완기 최저 혈압 <input type="number" id="lowPressure"> </div> <div id="judgement">결과는 이곳에 표시됩니다.</div> <input type="button" id="btn" value="check"> <script type="text/javascript" src="script.js"></script> </body> </html>javascript
const hp = document.getElementById("highPressure"); const lp = document.getElementById("lowPressure"); const judgement = document.getElementById("judgement"); const btn = document.getElementById("btn") function isHighPressure(){ if( hp < 120 && lp < 80){ judgement.innerHTML = "당신의 혈압은 정상입니다."; } else if( hp < 139 && lp < 89){ judgement.innerHTML = "당신의 혈압은 다소 높습니다."; } else{ judgement.innerHTML = "당신은 고혈압입니다."; } } btn.addEventListener("click", isHighPressure); //왜안돼;;;스크립트 코드를 짜고 자꾸 실행이 안되고 먹통이어서 뭐가 문젠지 하나하나 고쳐보며 작성했는데
예제가 있는데도 못해서 어이가 없었다...
원인 중 하나는 innerHTML을 사용할 때 HTML요소를 class로 따오니 적용이 안되고
id로 따오니까 적용이 됐다;
stackoverflow.com/questions/34456436/document-getelementsbyclassname-innerhtml-not-working?lq=1
document.getElementsByClassName("").innerHTML - not working
I have a div element with class name today in my html file and I am trying to print temperature on it, for that I have writen the following code but this is not printing anything on the div element,
stackoverflow.com
innerHTML이 getElementByClass로는 안됐던 이유는, getElementByClass는 collection을 가져오기 때문이라고..그래서 원한다면
아래와 같이 표현해야한다고 한다.
const judgement = document.getElementById("judgement")[0];'TodayILearned > TILWIL' 카테고리의 다른 글
[WIL] 21.03.07 (0) 2021.03.07 201213_WIL (0) 2020.12.14 201126_TIL (0) 2020.11.27 201123_TIL (0) 2020.11.24 201119_TIL (0) 2020.11.20