Guys I'm trying to build a number guessing game using JS, i got stuck, is there anyone who can help me solve this issue

JavaScript
1

“”"
When i click on the button after entering the number sometimes it works sometimes it doesn’t. It seems i can’t find what is happeing. The code below are the JS and the HTML, and css part of my code.
“”"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="quiz.css">
    <title>Quiz Game!</title>
</head>
<body>
    <h1 class="displaylevel">You have 5 attempts to guess a number between 1 and 100</h1>
    
    <h2 class="correctNumber"> </h2>
    <div class="main-div">
       <label for="number">Enter a number: </label>
       <input type="number" id="number" class="number-input">
       <button id="btn" class="btn">Check Answer</button>
    </div>

    <div class="show-result">
        <p id="answerText"></p>
    </div>
    <script src="quiz.js"></script>
</body>
</html>

body{
    background-color: gray;
}

h1{
    text-align: center;
    font-size: 35px;
    color: white;
}

.main-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    gap: 12px;
}

.number-input{
    max-width: 80px;
    height: 40px;
    font-size: 30px;
    text-align: center;
}

.main-div label{
    font-size: 30px;
}

.btn{
    height: 30px;
    background-color: orange;
    font-size: 18px;
    cursor: pointer;
}

.show-result{
    /* background-color: orange; */
    width: 300px;
    height: 180px;
    margin: 20px auto;
    text-align: center;
    color: white;
    font-size: 30px;
    padding: 30px;
}
h2{
    text-align: center;
    margin-top: 40px;
    font-size: 35px;
    color: orange;
}

.correctAnswer{
    background-color: green;
}

.low{
    background-color: red;
}

.high{
    background-color: orange;
}

.userlevel{
    text-align: center;
    height: 25px;
}

.head-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

'use strict';

let userAnswer = document.querySelector(".number-input");
const buttonCheck = document.querySelector("#btn");
const infoDisplay = document.querySelector(".show-result");
const level = document.querySelector("#userlvel");
const showResult = document.querySelector("#answerText");

const randomNumber = Math.floor(Math.random() * 100 + 1);



let playing = true

buttonCheck.addEventListener("click", function(){
    let numAttempt = 5
    let userAnswer = document.querySelector(".number-input").value;
    let myAnswer = Number(userAnswer)

    while(myAnswer  !== randomNumber && numAttempt > 0){
        if(myAnswer  < randomNumber){
            numAttempt--;
            document.querySelector(".displaylevel").textContent = `You have ${numAttempt} left to guess the number.`;
            infoDisplay.classList.add("low");
            showResult.textContent = "The number you have guessed is too low!!👇";
    
        }else if (myAnswer  < randomNumber){
            numAttempt--;
            document.querySelector(".displaylevel").textContent = `You have ${numAttempt} left to guess the number.`;
            infoDisplay.classList.add("high");
            showResult.textContent = "The number you have guessed is too high!!☝";
            
        }
    }
    if(myAnswer === randomNumber){
        document.querySelector("#answerText").innerHTML 
        = "🍾Congratulations you've got the correct answer!";

        infoDisplay.classList.add("correctAnswer");
        
        document.querySelector(".correctNumber").innerHTML 
        = `The correct number is: ${randomNumber}`
    }else{
        document.querySelector("#answerText").innerHTML 
        = `👎 You don't have anymore attempts left! The correct number was ${randomNumber}`;
    }
       
});
2

Welcome back to the forum @Davelove

  1. The logic defaults to the else statement if the guess is not correct.
  2. The conditions for the if and else if statements in the while loop are identical. How does the logic handle when the user guess is above the random number?

Happy coding

3

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').