无法禁用按钮

Question

我是全栈的新手，我已经开始在一个网站上工作，该网站从我在后端创建的服务器获取数据。

我写了这个html代码：

<!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>

交易是当没有关于玩家的信息时，按钮应该被禁用

我确定了 3 个这样的状态：

刚刚完成页面加载，但没有人点击“获取用户” 统计按钮。
点击了“获取用户统计信息”按钮，但数据尚未到达。
将一个不存在的用户发送到输入中，但它没有检索到数据（脚本管理它知道什么时候没有数据）。

所以我运行在html代码末尾写了一个脚本：

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. :(`; 
     }
    };

如您所见，第一行是禁用 class statButton 的按钮，但这不会运行如果您运行页面按钮可用。

运行具有有效用户名的 makeUserStats 函数很好，并且在获取操作期间禁用了按钮，但是如果我在那里输入一个不存在的用户名，它再次不起作用并且按钮可以按下（即使在 catch 函数中我包含了一个按钮禁用行）。

请帮忙，我猜有一些我没有识别的语法问题，因为我没有在我的代码中发现任何逻辑错误。

谢谢！

-编辑-

显然我没有给按钮 classes，实际上我确实给了他们一个 class 但可能在代码的许多重写之一中我忘了添加它。

Answer 1

你的第一个错误在这里

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

输入字段没有结束 </input> 标记。

第二个错误是你没有给你的按钮任何class。

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

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

无法禁用按钮

Can't manage to disable a button

javascript

html

button

frontend

web-frontend