Addeventlistner not working

JavaScript
1

im relatively new to coding and im not sure whats going on , i added an event listner to a button which suppose to show another element by adding a new class but its not working , can anybody advise whats wrong with my code , thank you

//selecting all required elements
const start = document.querySelector(".start");
const startBtn = start.querySelector(".start__button");
const instructions = document.querySelector(".instructions");
const exitBtn = instructions.querySelector(".instructions__quit");
const continueBtn = instructions.querySelector(".instructions__proceed");

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

.instructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 5.4rem;
    background: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;


    .showinstructions {
        opacity: 1;
        z-index: 5;
        pointer-events: auto;
       transform: translate(-50%, -50%) scale(1);
    }

<body>
    <!-- start Test button -->
    <div class="start">
        <p class='start__paragraph'>Click Below to start the test</p>
        <button class='start__button'>Start Test</button>
    </div>

    <!-- Instructions -->
    <div class="instructions">
        <div class="instructions__title">
            <span>Rules of the test.</span> 
        </div>
        <div class="instructions__list">
2

do you have a codepen or something where you can share the live project? it would be much more easy to check what’s going on like that

also because you have not shared your html

3

i have added a prt of my html , but unfortunately i dont have codepin

4

it doesn’t have to be necessarily codepen, but if you have already a preview, it’s easier for others to help you

5

Try to remove the dot
classList.add(".showinstructions")
classList.add("showinstructions")

It may help, it may not.

6

it didnt help :slight_smile:

7

Without working codepen or something, I can only point you to a tutorial.

8

The problem seems to be that you’ve missed the closing bracket in your CSS. Simple put a } at the end of the .instructions block in your CSS code and it should work! Also, you should actually remove the dot in front of .showinstructions as @MyTrueName mentioned.

9

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