Question 226139 in Html Question posted in
Some basic documentation can be found here.

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

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")
})
Tags:

2

Answers


  1. 0

    bạn có đặt tên tệp js là index.js không, cấu trúc mã nguồn của bạn thế nào

    Login or Signup to reply.
  2. 0

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

    <script defer src="index.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search