Button not functioning

Hi,
Im relevantly new to coding , and the addeventlistner for the button is not working in the code below , appreciate if you advise what was wrong with the code thanks.

https://codepen.io/Freesudani/pen/LYWPNXa

// if start button clicked
startBtn.addEventListener("click", function(){
    instructions.classList.add("showinstructions"); //show instructions
});

When I click on the button the showinstructions class is added to the .instructions div. So it seems to be doing exactly what you have told it to do.

Right , but when i click on StartBtn the instructions interface should appear and thats not happening .

Why should the instructions interface appear? What have you done to make that happen?

Hello, freesudani.
your code in line 60 of css section is missing a comma. You need to add a comma when you select multiple selectors.
Your code:

.instructions .showinstructions {
}

Solution:

.instructions,
.showinstructions {
}

It would be better if you add a width to that element to display better :slight_smile: .

well , the instruction class has the opacity = 0 , in showinstruction class the opacity = 1 , which will override the opacity state in the instruction class , in addition i set the Z-index = 5 so it will appear on top of the startBtn.

ohh that the code from CSS after it was compiled from SASS , and showinstruction class is nested inside the instruction class, so i guess thats why it showed up like this.

Hope it fixed your problem.

Hi @freesudani

The reason it’s not showing the instructions when you click is that on your CSS the element div ‘instructions’ you have structured like this with space to it.

As of now your code:

.instructions .showinstructions{}

if you want to add a class to that particular element you have to add a dot continuously from the element instructions like this. Do you see the differences. ?

Solution:

.instructions.showinstructions{}

Now you have an element adding a style to it. That’s all there is because in your JS addeventListener your listening for a click and add a style to that element as well.

instructions.classList.add("showinstructions");

As a side note make sure all your div elements like instructions should be better with an id instead of a class.

<!-- Instructions -->
    <div id="instructions">
         <!-- Content -->
    </div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.