CODEWITHSUNDEEP
javascripthtmlbuttonfrontendweb-frontend
Yonatan Ramot
Yonatan Ramot

Reputation: 15

Can't manage to disable a button

I'm pretty new to fullstack and I've started working on a site that fetches data from a server I made at the backend.

I wrote this html code:

<!DOCTYPE html>
<html>
<head>
    <title>Mithadedim Chess</title>
    <link href="./styles/index.css" rel="stylesheet">
</head>

<body>

    <div id="container">
        <h1>Mithadedim Chess Official</h1>
        <p style="font-size: 22px;">Welcome to the mithadedim chess official site! you can see your rating here!</p>     
            <label for="usernaem">Please Enter Username:</label><br>
            <input type="text" id="username" name="username" placeholder="Username Here"></input>
            <button onclick="makeUserStats()">Get User Stats</button>

            <div><br></div>
        <div id="rating">rating goes here</div>

        <div id="nav">
            <ul>
                <button onclick="getDaily()">Daily</button>
                <button onclick="getRapid()">Rapid</button>
                <button onclick="getBlitz()">Blitz</button>
                <button onclick="getBullet()">Bullet</button>

                <script> document.getElementsByClassName('statButton').disabled = true; </script>
            </ul>
        </div>

    </div>
    <script src="./js/index.js"></script>
</body>

</html>

And the deal is that when there is no info about a player the buttons should be disabled

I identified 3 states like this:

So I run a script at the end of the html code:

document.getElementsByClassName('statButton').disabled = true;//disabling the buttons at the start if the code

const makeUserStats = () => {
const username = document.getElementById('username').value;
document.getElementById('rating').innerHTML = `Searching`; 
console.log(`http://localhost:3000/getRating?username=${username}`)
fetch(`http://localhost:3000/getRating?username=${username}`)
.then(rating => {
    document.getElementsByClassName('statButton').disabled = true;//disabling the buttons when a search is starting
    console.log('got json');
    return rating.json();
})
.then((userRating => {
    console.log(userRating.isPlayer)
    if(userRating.isPlayer) {
    window.userRating = userRating;
    window.user = username;
    console.log(window.userRating)
    }   else {
        throw new Error('User Not Found');
    }
}))
.then(() => {
    console.log('got to enabling buttons'); 
    document.getElementsByClassName('statButton').disabled = false;
    document.getElementById('rating').innerHTML = `${window.user} rating is:`; 
})
.catch(err => {
    document.getElementsByClassName('statButton').disabled = true;
    window.userRating = err;
    console.log(window.userRating)
});
}

const getDaily = () => {
    if(window.userRating.daily) {
   document.getElementById('rating').innerHTML = `${window.user} daily rating is: ${window.userRating.daily}`; 
    } else {
        document.getElementById('rating').innerHTML = `${window.user} never played daily. :(`; 
    }
};

const getRapid = () => {
    if (window.userRating.rapid) {
    document.getElementById('rating').innerHTML = `${window.user} rapid rating is: ${window.userRating.rapid}`; 
    } else {
        document.getElementById('rating').innerHTML = `${window.user} never played rapid. :(`; 
    }
};

const getBlitz = () => {
    if (window.userRating.blitz) {
    document.getElementById('rating').innerHTML = `${window.user} blitz rating is: ${window.userRating.blitz}`; 
    } else {
        document.getElementById('rating').innerHTML = `${window.user} never played blitz. :(`; 
    }
};
 
 const getBullet = () => {
     if (window.userRating.bullet) {
     document.getElementById('rating').innerHTML = `${window.user} bullet rating is: ${window.userRating.bullet}`; 
     } else {
        document.getElementById('rating').innerHTML = `${window.user} never played bullet. :(`; 
     }
    };

As you can see the first line is to disable the buttons of class statButton from working, but this doesnt run and if u run the page the buttons are available.

Running the makeUserStats function with a valid username is good and making the buttons disabled during the fetch operation, but if I throw in there a non existing username it again doesn't work and the buttons are pressable (even though at the catch function I included a buttons disable line).

Please help, I geuss there is some syntax problem I am not identifying because I don't spot any logic errors in my code.

Thank you!

-edit-

Apperantly I did not gave the buttons classes, enitialy I did gave them a class but probably in one of the many rewrites of the code I forgot to add it.

Upvotes: 1

Views: 76

Answers (1)

MD AAMIR SIDDIQUI
MD AAMIR SIDDIQUI

Reputation: 36

Your first error is here

<input type="text" id="username" name="username" placeholder="Username Here"></input>

Input field did not have closing </input> tag.

Second error is you have not give any class to your button.

<button onclick="makeUserStats()">Get User Stats</button>

<button onclick="makeUserStats()" class="statButton">Get User Stats</button>

Upvotes: 2

Related Questions