728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력값 제어</title>
<script>
/*
목표 : 덧셈 계산기 만들기
-계산시점 : = 버튼을 눌럿을떄 (onclick)
-계산내용 : #a의 입력값과 #b의 입력값을 더하여 #c에 출력
*/
function plus(){
//준비 : #a #b #c 참조변수(레퍼런스)
var a= document.querySelector("#a");
var b= document.querySelector("#b");
var c=document.querySelector("#c");
//Q)입력값은 속성 이름이 무엇일까요?
//A) INPUT SELECT TEXTAREA 이 세개의 입력창에는 value라는 속성이 존배하며 입력값을 저장
//console.log(a.value);
//c.value=a.value+b.value; 문자열로 더해짐
if(a.value==""|| b.value==""){ // <---> a.value!==""&& b.value!==""
return;
}
c.value=parseInt(a.value)+parseInt(b.value);
}
</script>
</head>
<body>
<input type="number" id="a">
+
<input type="number" id="b">
<button onclick="plus();">=</button>
<input type="number" id="c">
</body>
</html>'[LANG] > - JavaScript' 카테고리의 다른 글
| [JS]Default object (0) | 2022.06.02 |
|---|---|
| [JS]Default Event (0) | 2022.06.02 |
| [JS] 정규표현식 regex (0) | 2022.06.02 |
| [JS]function 함수 event (0) | 2022.06.02 |
| [JS] 자바 vs 자바스크립트의 차이/비슷한점 (0) | 2022.06.02 |
댓글