[第二十四天] 牛刀小試-猜數字遊戲

2024 iThome 鐵人賽

DAY 24

自我挑戰組

認識JavaScript系列第 24 篇

16th鐵人賽

IRENE

2024-10-08 23:58:50

38 瀏覽

分享至

<!DOCTYPE html>
<html lang="en">
<head>
    <title>猜數字遊戲(1~100)</title>
</head>
<body>
    <h1>猜數字遊戲(1~100)</h1>
    
    <input type="number" id="inputNumber" placeholder="輸入你的猜測" min="1" max="100">
    <button onclick="start()">猜測</button>
    <div id="result"></div>

</body>
</html>

拉畫面~

    let randomNumber = Math.floor(Math.random() * 100) + 1;
    let addTimes = 0;

    function start() {
        const guess = parseInt(document.getElementById('inputNumber').value);
        const result = document.getElementById('result');
        addTimes++;

        if (isNaN(guess) || guess < 1 || guess > 100) {
            result.textContent = "請輸入 1 到 100 之間的有效數字！";
            return;
            }
            
        if (guess === randomNumber) {
            result.textContent = `恭喜！你猜對了！總共猜了 ${addTimes} 次。`;
            } 
        else if (guess < randomNumber) {
            result.textContent = "太小了！";
            } 
        else {
            result.textContent = "太大了！";
            }
        }

去掉了<script></script>，測試時，統一放在html欄時並不會報錯，
若分開放置時，則會出現錯誤，今天只找到了一個原因：
在script時出現了有關於html的語法，而導致了script無法正確辨識。
但我還是無法確認是在哪一句出現了錯誤，（會繼續研究）。