HTML / JavaScript
랜덤넘버 생성 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Up&Down Game</title>
</head>
<body>
<input type="text" id="userInput" placeholder="Enter a number">
<input type="button" id="submitButton" value="Check!">
</body>
</html>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1; /// 1번만 생성
let userInput = document.querySelector('#userInput');
let submitButton = document.querySelector('#submitButton');
submitButton .addEventListener('click', function(){
let randomNumber = Math.floor(Math.random() * 100) + 1; // 클릭 시 생성
let userNumber = userInput.value;
alert(`You entered ${userInput.value} and the random number is ${randomNumber}`);
});
let userNumber = userInput.value;
</Script>
<Script>let randomNumber = Math.floor(Math.random() * 100) + 1;
</Script>
/// 1번만 생성됨 -> 클릭 시 마다 랜덤넘버 추출해야함
방법 1: randomNumber 변수를 이벤트 리스너 안에 넣기
<Script>let userInput = document.querySelector('#userInput');
let submitButton = document.querySelector('#submitButton');
submitButton.addEventListener('click', function(){
let randomNumber = Math.floor(Math.random() * 100) + 1;
let userNumber = userInput.value;
alert(`You entered ${userNumber} and the random number is ${randomNumber}`);
});</Script>
방법 2: randomNumber 변수 값을 함수를 통해 업데이트하기
<Script>
let userInput = document.querySelector('#userInput');
let submitButton = document.querySelector('#submitButton');
function generateRandomNumber() {
return Math.floor(Math.random() * 100) + 1;
}
submitButton.addEventListener('click', function(){
let randomNumber = generateRandomNumber();
let userNumber = userInput.value;
alert(`You entered ${userNumber} and the random number is ${randomNumber}`);
});
</Script>
성공
업다운 기능 확인
[UP]
[DOWN]
[SAME]
'알토르' 카테고리의 다른 글
| 알토르 1주차 태그 (1) | 2025.08.18 |
|---|---|
| 알토르 1주차 Cusor AI (4) | 2025.08.13 |
| 알토르 1주차 - API (1) | 2025.08.13 |
| 알토르 1주차 - Typing Game 4 (2) | 2025.08.13 |
| 알토르 1주차 ES6 (3) | 2025.08.12 |
