설계도
마크업
가져온다 = 선언
저장한다 = 변수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input id="first" type="number">
<span>X</span>
<input id="second" type="number"/>
<button id="click">실행</button>
</div>
<div>
<span>=</span>
<span id="result"></span>
</div>
<script src="./index.js"></script>
</body>
</html>
만약에 스크립트의 위치가 <head></head>사이에 있을경우?
JS
document.querySelector('#click').addEventListener('click',()=>{
const first = document.querySelector('#first').value;
const second = document.querySelector('#second').value;
if(first){
if(second){
document.querySelector('#result').textContent = first*second;
}else{
// alert('두번째 값을 입력하세요');
document.querySelector('#result').textContent = '두번째값을 입력하세요.'
}
}else{
// alert('첫번째 값을 입력하세요');
document.querySelector('#result').textContent = '첫번째값을 입력하세요.'
}
});변수의 선언 및 초기화는 이벤트리스너함수 안에서 이루어져야 먹힌다.
만약 함수 밖에서 선언했을경우?
반응형
'Frontend > game' 카테고리의 다른 글
| [Javascript] 끝말잇기 (0) | 2021.01.30 |
|---|
