英文:
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"> <!--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>
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;
}
JavaScript文件中的代码
/*使按钮可点击，使播放按钮消失，使记分牌出现*/
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
好的，以下是翻译好的内容：
好的，你的JavaScript代码无法运行，因为它没有正确链接。请添加defer属性：
英文:
ok well, your JavaScript isn't going to run cuz its not properly linked. add the defer attribute
<script defer src="index.js"></script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论