无法禁用按钮
Can't manage to disable a button
我是全栈的新手,我已经开始在一个网站上工作,该网站从我在后端创建的服务器获取数据。
我写了这个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 但可能在代码的许多重写之一中我忘了添加它。
你的第一个错误在这里
<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>
我是全栈的新手,我已经开始在一个网站上工作,该网站从我在后端创建的服务器获取数据。
我写了这个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 但可能在代码的许多重写之一中我忘了添加它。
你的第一个错误在这里
<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>