我的按钮不遵循JS脚本，尽管我已经链接了文件。

huangapple
go评论103阅读模式
英文:

My button doesn't follow JS script even though I have linked the file

问题

为了一些背景信息，我正在为一个剪刀石头布网页的用户界面工作。点击播放按钮后，按钮将消失，让出得分线和表示三个动作的图标可点击。然而，当前情况下，由于某种原因，当我点击按钮时，什么都不会出现。以下是相关代码：

HTML中的代码

  1. <head>
  2.     <link rel="stylesheet" type="text/css" href="static/css/index.css">
  3.     <script src="index.js"></script>
  4. </head>
  5. <body>
  6.     <div class="title">
  7.         <div class="main">
  8.             <h1>Rock Paper Scissors</h1>
  9.         </div>
  10.         <div>
  11.             <h2>First one to three</h2>
  12.         </div>
  13.     </div>
  14.     <div class="button-layout">
  15.         <a href="#" id="rock" class="button disabled">
  16.             <i class="fa-solid fa-hand-back-fist"></i>
  17.             <caption>Rock</caption>
  18.         </a>
  19.         <a href="#" id="paper" class="button disabled">
  20.             <i class="fa-solid fa-hand"></i>
  21.             <caption>Paper</caption>
  22.         </a>
  23.         <a href="#" id="scissors" class="button disabled">
  24.             <i class="fa-solid fa-hand-scissors"></i>
  25.             <caption>Scissors</caption>
  26.         </a>
  27.     </div>
  28.     <div id="play-button"> <!-- 这是问题中的按钮 -->
  29.         <button>Play game</button>
  30.     </div>
  31.     <div class="scoreline hidden">
  32.         <table>
  33.             <tr>
  34.                 <th>Human</th>
  35.                 <th>Machine</th>
  36.             </tr>
  37.             <tr class="score">
  38.                 <td>0</td>
  39.                 <td>0</td>
  40.             </tr>
  41.         </table>
  42.     </div>
  43. </body>

CSS中的代码

  1. .button-layout {
  2.     display: flex;
  3.     margin: 10px;
  4.     background-color: whitesmoke;
  5.     justify-content: space-around;
  6. }
  8. .button {
  9.     display: flex;
  10.     flex-direction: column;
  11.     padding: 10px;
  12.     align-items: center;
  13.     text-decoration: none;
  14. }
  16. i {
  17.     font-size: 60px;
  18.     margin-bottom: 10px;
  19. }
  21. #play-button {
  22.     display: flex;
  23.     justify-content: center;
  24. }
  26. .replay-button {
  27.     display: flex;
  28.     justify-content: center;
  29. }
  31. table,
  32. th,
  33. td {
  34.     width: 40%;
  35.     border: 1px solid #ddd;
  36.     border-collapse: collapse;
  37. }
  39. .scoreline {
  40.     display: flex;
  41.     justify-content: center;
  42. }
  44. td {
  45.     text-align: center;
  46. }
  48. .disabled {
  49.     pointer-events: none;
  50. }
  52. .hidden {
  53.     display: none;
  54. }

JS文件中的代码

  1. /* 使按钮可点击，播放按钮消失，得分线出现 */
  2. document.getElementById('play-button').addEventListener("click", function(){
  3.     const buttons = document.getElementsByClassName('button')
  4.     for (i = 0; i < buttons.length; i++){
  5.         buttons[i].classList.remove('disabled')
  6.     }
  7.     document.getElementById('play-button').style.display = "none"
  8.     const scoreline = document.querySelector(".scoreline");
  9.     scoreline.classList.remove("hidden")
  10. })
英文:

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

  1. &lt;head&gt;
  2.     &lt;link rel=&quot;stylesheet&quot;  type=&quot;text/css&quot; href=&quot;static/css/index.css&quot;&gt;
  3.     &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
  4. &lt;/head&gt;
  5. body&gt; 
  6.     &lt;div class=&quot;title&quot;&gt;
  7.         &lt;div class =&quot;main&quot;&gt;
  8.             &lt;h1&gt;Rock Paper Scissors&lt;/h1&gt;
  9.         &lt;/div&gt;
  10.         &lt;div&gt;
  11.             &lt;h2&gt;First one to three&lt;/h2&gt;
  12.         &lt;/div&gt;
  13.         
  14.     &lt;/div&gt;
  15.     &lt;div class=&quot;button-layout&quot;&gt;
  16.         &lt;a href=&quot;#&quot; id=&quot;rock&quot; class=&quot;button disabled&quot;&gt;
  17.             &lt;i class=&quot;fa-solid fa-hand-back-fist&quot;&gt;&lt;/i&gt;
  18.             &lt;caption&gt;Rock&lt;/caption&gt;
  19.         &lt;/a&gt;
  20.         &lt;a href=&quot;#&quot; id=&quot;paper&quot; class=&quot;button disabled&quot;&gt;
  21.             &lt;i class=&quot;fa-solid fa-hand&quot;&gt;&lt;/i&gt;
  22.             &lt;caption&gt;Paper&lt;/caption&gt;
  23.         &lt;/a&gt;
  24.         &lt;a href=&quot;#&quot; id=&quot;scissors&quot; class=&quot;button disabled&quot;&gt;
  25.             &lt;i class=&quot;fa-solid fa-hand-scissors&quot;&gt;&lt;/i&gt;
  26.             &lt;caption&gt;Scissors&lt;/caption&gt;
  27.         &lt;/a&gt;
  28.     &lt;/div&gt;
  29.     &lt;div id=&quot;play-button&quot;&gt; &lt;!--The button in question--&gt;
  30.         &lt;button&gt;Play game&lt;/button&gt;
  31.     &lt;/div&gt;
  33.     &lt;div class=&quot;scoreline hidden&quot;&gt;
  34.         &lt;table&gt;
  35.             &lt;tr&gt;
  36.                 &lt;th&gt;Human&lt;/th&gt;
  37.                 &lt;th&gt;Machine&lt;/th&gt;
  38.             &lt;/tr&gt;
  39.             &lt;tr class=&quot;score&quot;&gt;
  40.                 &lt;td&gt;0&lt;/td&gt;
  41.                 &lt;td&gt;0&lt;/td&gt;
  42.             &lt;/tr&gt;
  43.         &lt;/table&gt;
  44.     &lt;/div&gt;
  45. &lt;/body&gt;

Code in CSS

  1. .button-layout{
  2.     display: flex;
  3.     margin: 10px;
  4.     background-color: whitesmoke;
  5.     justify-content: space-around;
  6. }
  8. .button{
  9.     display: flex;
  10.     flex-direction: column;
  11.     padding: 10px;
  12.     align-items: center;
  13.     text-decoration: none;
  14. }
  16. i{
  17.     font-size: 60px;
  18.     margin-bottom: 10px;
  19. }
  21. #play-button{
  22.     display: flex;
  23.     justify-content: center;
  24. }
  26. .replay-button{
  27.     display: flex;
  28.     justify-content: center;
  29. }
  31. table, th, td{
  32.     width:40%;
  33.     border: 1px solid #ddd;
  34.     border-collapse: collapse;
  35. }
  37. .scoreline{
  38.     display: flex;
  39.     justify-content: center;
  40. }
  42. td{
  43.     text-align: center;
  44. }
  46. .disabled{
  47.     pointer-events: none;
  48. }
  50. .hidden{
  51.     display: none;
  52. }

Code in my JS file

  1. /*Make the buttons clickable, the play-button disappear and the scoreline to appear*/
  2. document.getElementById(&#39;play-button&#39;). addEventListener(&quot;click&quot;, function(){
  3.     const buttons = document.getElementsByClassName(&#39;button&#39;)
  4.     for (i=0; i &lt;buttons.length; i++){
  5.         buttons[i].classList.remove(&#39;disabled&#39;)
  6.     }
  7.     document.getElementById(&#39;play-button&#39;).style.display = &quot;none&quot;
  8.     const scoreline = document.querySelector(&quot;.scoreline&quot;);
  9.     scoreline.classList.remove(&quot;hidden&quot;)
  10. })

答案1

得分: 0

添加defer属性：

  1. <script defer src="index.js"></script>
英文:

ok well, your JavaScript isn't going to run cuz its not properly linked. add the defer attribute

  1. &lt;script defer src=&quot;index.js&quot;&gt;&lt;/script&gt;

huangapple
  • 本文由 发表于 2023年8月9日 10:59:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/76864299-2.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定