英文:
My button doesn't follow JS script even though I have linked the file
问题
为了一些背景信息，我正在为一个剪刀石头布网页的用户界面工作。点击播放按钮后，按钮将消失，让出得分线和表示三个动作的图标可点击。然而，当前情况下，由于某种原因，当我点击按钮时，什么都不会出现。以下是相关代码：
HTML中的代码
<head>
<link rel="stylesheet" type="text/css" href="static/css/index.css">
<script src="index.js"></script>
</head>
<body>
<div class="title">
<div class="main">
<h1>Rock Paper Scissors</h1>
</div>
<div>
<h2>First one to three</h2>
</div>
</div>
<div class="button-layout">
<a href="#" id="rock" class="button disabled">
<i class="fa-solid fa-hand-back-fist"></i>
<caption>Rock</caption>
</a>
<a href="#" id="paper" class="button disabled">
<i class="fa-solid fa-hand"></i>
<caption>Paper</caption>
</a>
<a href="#" id="scissors" class="button disabled">
<i class="fa-solid fa-hand-scissors"></i>
<caption>Scissors</caption>
</a>
</div>
<div id="play-button"> <!-- 这是问题中的按钮 -->
<button>Play game</button>
</div>
<div class="scoreline hidden">
<table>
<tr>
<th>Human</th>
<th>Machine</th>
</tr>
<tr class="score">
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
</body>
CSS中的代码
.button-layout {
display: flex;
margin: 10px;
background-color: whitesmoke;
justify-content: space-around;
}
.button {
display: flex;
flex-direction: column;
padding: 10px;
align-items: center;
text-decoration: none;
}
i {
font-size: 60px;
margin-bottom: 10px;
}
#play-button {
display: flex;
justify-content: center;
}
.replay-button {
display: flex;
justify-content: center;
}
table,
th,
td {
width: 40%;
border: 1px solid #ddd;
border-collapse: collapse;
}
.scoreline {
display: flex;
justify-content: center;
}
td {
text-align: center;
}
.disabled {
pointer-events: none;
}
.hidden {
display: none;
}
JS文件中的代码
/* 使按钮可点击，播放按钮消失，得分线出现 */
document.getElementById('play-button').addEventListener("click", function(){
const buttons = document.getElementsByClassName('button')
for (i = 0; i < buttons.length; i++){
buttons[i].classList.remove('disabled')
}
document.getElementById('play-button').style.display = "none"
const scoreline = document.querySelector(".scoreline");
scoreline.classList.remove("hidden")
})
英文:
For a bit of context, I'm working on the UI for a rock paper scissors webpage. Upon clicking the play button, the button would disappear and make way for a scoreline and the icons representing 3 moves above would be made clickable. However, currently, for some reason, when I click the button, nothing would materialize. Here is the revelant code:
Code in html
<head>
<link rel="stylesheet" type="text/css" href="static/css/index.css">
<script src="index.js"></script>
</head>
body>
<div class="title">
<div class ="main">
<h1>Rock Paper Scissors</h1>
</div>
<div>
<h2>First one to three</h2>
</div>
</div>
<div class="button-layout">
<a href="#" id="rock" class="button disabled">
<i class="fa-solid fa-hand-back-fist"></i>
<caption>Rock</caption>
</a>
<a href="#" id="paper" class="button disabled">
<i class="fa-solid fa-hand"></i>
<caption>Paper</caption>
</a>
<a href="#" id="scissors" class="button disabled">
<i class="fa-solid fa-hand-scissors"></i>
<caption>Scissors</caption>
</a>
</div>
<div id="play-button"> <!--The button in question-->
<button>Play game</button>
</div>
<div class="scoreline hidden">
<table>
<tr>
<th>Human</th>
<th>Machine</th>
</tr>
<tr class="score">
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
</body>
Code in CSS
.button-layout{
display: flex;
margin: 10px;
background-color: whitesmoke;
justify-content: space-around;
}
.button{
display: flex;
flex-direction: column;
padding: 10px;
align-items: center;
text-decoration: none;
}
i{
font-size: 60px;
margin-bottom: 10px;
}
#play-button{
display: flex;
justify-content: center;
}
.replay-button{
display: flex;
justify-content: center;
}
table, th, td{
width:40%;
border: 1px solid #ddd;
border-collapse: collapse;
}
.scoreline{
display: flex;
justify-content: center;
}
td{
text-align: center;
}
.disabled{
pointer-events: none;
}
.hidden{
display: none;
}
Code in my JS file
/*Make the buttons clickable, the play-button disappear and the scoreline to appear*/
document.getElementById('play-button'). addEventListener("click", function(){
const buttons = document.getElementsByClassName('button')
for (i=0; i <buttons.length; i++){
buttons[i].classList.remove('disabled')
}
document.getElementById('play-button').style.display = "none"
const scoreline = document.querySelector(".scoreline");
scoreline.classList.remove("hidden")
})
答案1
得分: 0
添加defer属性：
<script defer src="index.js"></script>
英文:
ok well, your JavaScript isn't going to run cuz its not properly linked. add the defer attribute
<script defer src="index.js"></script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论