<h1>구구단</h1>
<form id="guguForm">
<div id="question"></div>
<input type="number" id="answer"/>
<div>
<button id="button" >제출하기</button>
</div>
</form>
<div id="result"></div>
<button id="restart">다른 문제 풀기</button>
xxxxxxxxxx
// 랜덤한 숫자 설정하기
const RANDOM_NUM1 = Math.floor(Math.random()*10);
const RANDOM_NUM2 = Math.floor(Math.random()*10);
// DOM 가져오기
let form = document.getElementById("guguForm");
let qu = document.getElementById("question");
let ans = document.getElementById("answer")
let re = document.getElementById("result")
let restart = document.getElementById("restart")
// 문제 내기
qu.textContent = `${RANDOM_NUM1} X ${RANDOM_NUM2}=?`
// form submit 시 발생하는 이벤트
form.addEventListener("submit", event => {
// 아래 코드 지우고 실행해보기!////
event.preventDefault()
////////////////////////////
let firstNum = RANDOM_NUM1
let secondNum = RANDOM_NUM2
let result = firstNum*secondNum
if(result === Number(ans.value)) {
re.textContent = "정답!"
} else {
re.textContent = "땡!"
}
})
// 다른 문제 풀기 버튼을 눌렀을 때 발생하는 이벤트
restart.onclick = function () {
// 새로 고침
window.location.href = window.location.href;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.