How can I fix the clicking transition from start button to info-box?

Kono 0
Viewed 24

I've been stuck on this for awhile the action in the console was working, but something is preventing it from transitioning. I think something in the CSS is overriding but I've looked and cannot find the issue.

here is my code, I'm a beginner at JS so I really tried to figure it out, but I was hoping it can be resolved quickly

var startButton = document.getElementById("startButton");
var infoBox = document.querySelector(".info-box");
var quitButton = document.querySelector(".buttons .quit");
var contButton = document.querySelector(".buttons .restart");
var questionArr = document.getElementById("quiz-box");
var score = document.getElementById("total-que");
var questionId = document.getElementById("option");


//If start button is clicked
startButton.onclick = ()=>{
    infoBox.classList.add("activeInfo");
    console.log("test")
}

//If Exit button is clicked
quitButton.onclick = ()=>{
    infoBox.classList.remove("activeInfo");

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/style.css" />
    <link rel="extra stylesheet" href="./assets/extra.css">
    <title>Coding Quiz Challenge!</title>
</head>

    <body>
        <a id="highScore">View Highscores</a>
        
        <div class="container">
            <div id="questions">
                <h1> Coding Quiz Challenge</h1>
                <ul id="list"></ul>
            </div>
        <!--Info box-->
        <!--START QUIZ BUTTON-->
        <button type="button" id="startButton">Start Quiz</button>
        <div class = "info-box" style.display = "block">
            <div class="info-title">
                <span id="span"><b>⋆ Quiz Information ⋆</b></span>
            </div>
           <div class ="info-text">
            <div class ="info">This test will assess your knowledge of basic JavaScript with 5 multiple choice questions. Click the
                "Start"
                button to begin the quiz. You will have 75 seconds to complete the assessment. Your score will your be your time remaining and the number correct.
            </div>
            <div class = "buttons">
             <button class="quit">Exit Quiz</button> 
             <button class="restart">Continue</button>
            </div>
           </div>
        </div>

CSS

    body {
    font-family:Verdana, Geneva, Tahoma, sans-serif
}
.startButton, .info-box, .result-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Highscore top */
#highScore{
    position: absolute;
    top: 12px;
    left: 0;
    color: rgb(208, 76, 204);
    padding-left: 10px;
}

/* Timer */
#timer {
    position: absolute;
    color: rgb(253, 253, 253);
    background-color: rgb(232, 142, 226);
    border: inset rgb(208, 76, 204); 
    border-radius: 10px;
    top: 12px;
    right: 0;
    padding: 11px;
    margin-right: 30px;
}
.timer-sec {
    background-color: rgb(255, 245, 245);
    width: 25px;
    height: 18px;
    border-radius: 6px;
    margin: 5px;
    display: inline-block
    }
    
    /* Start Page - Quiz Information & Start */
    div {
        padding: 5px;
    
    }
    h1 {
        background-color: rgb(239, 200, 239);
        margin-top: 50px;
    border: solid 1px purple;
    border-radius: 30px;
    padding: 10px
    }
    .container {
        text-align: center;
        padding: 32px 70px 32px 70px;
        height: auto;
        width: auto;
        background-color: rgba(221, 149, 230, 0.232);
    }
    
    .info{
        text-align: center;
        float: center;
    }
    div.info {
        width: 500px;
        margin: auto;
        padding: 6px;
        background-color: rgb(255, 255, 255);
        border-radius: 5px;
        
    }
    .info-box {
        border-top:2px solid rgb(209, 149, 196) ;
        border-bottom:2px solid rgb(209, 149, 196) ;
        border-radius: 6px;
        width: 100%;
        opacity: 0;
        transform: translate(-50%,-50% scale(0.9));
    }
    .info-box.activateInfo {
        opacity: 1;  
        pointer-events: auto;
        z-index: 5;
        transform: translate(-50%, -50%) scale(1);
      }
    .info-title {
        background-color: rgba(240, 190, 243, 0.842);
    }
    /* Start Button */
    #startButton{
        color: rgb(255, 255, 255);
        background-color: rgb(180, 102, 180);
        height: 50px;
        width: 130px;
        margin-top: 10px;
        border: inset 10px rgb(168, 93, 168);
        border-width: 3px;
        border-radius: 12px;
        cursor: pointer;   
    }
    /* Exit & Cont. Buttons */
    button {
        color: rgb(255, 255, 255);
        background-color: rgb(206, 155, 206);
        height: 45px;
        width: 74px;
        margin-top: 10px;
        border: inset 10px rgb(202, 123, 202);
        border-width: 3px;
        border-radius: 12px; 
        cursor: pointer;
    }
    
    .info-box, .buttons, button, .startButton {
        cursor: pointer;
        transition: all 0,3s ease;
    }
    .button:hover, button.quit:hover, button.restart:hover, .startButton:hover {
        color: rgb(255, 255, 255);
        background-color: rgb(246, 230, 246);
        cursor: pointer;
        transition: all 0,3s ease;
    }
button javascript css html
1 Answers

There's a few syntax errors that I've corrected but the main reason why your button doesn't work is because you've overlaid the div with the class .info-box on top of the button and set its opacity to 0 so it'e effectively a transparent layer over the top of the button that prevents you clicking it. If you set the infobox to display:none then display: inline-block in .activateInfo then it works. See attached.

var startButton = document.getElementById("startButton");
var infoBox = document.querySelector(".info-box");
var quitButton = document.querySelector(".buttons .quit");
var contButton = document.querySelector(".buttons .restart");
var questionArr = document.getElementById("quiz-box");
var score = document.getElementById("total-que");
var questionId = document.getElementById("option");



//If start button is clicked
startButton.onclick = () => {
  infoBox.classList.add("activateInfo");
}

//If Exit button is clicked
quitButton.onclick = () => {
  infoBox.classList.remove("activateInfo");
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif
}

.startButton,
.info-box,
.result-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Highscore top */

#highScore {
  position: absolute;
  top: 12px;
  left: 0;
  color: rgb(208, 76, 204);
  padding-left: 10px;
}


/* Timer */

#timer {
  position: absolute;
  color: rgb(253, 253, 253);
  background-color: rgb(232, 142, 226);
  border: inset rgb(208, 76, 204);
  border-radius: 10px;
  top: 12px;
  right: 0;
  padding: 11px;
  margin-right: 30px;
}

.timer-sec {
  background-color: rgb(255, 245, 245);
  width: 25px;
  height: 18px;
  border-radius: 6px;
  margin: 5px;
  display: inline-block
}


/* Start Page - Quiz Information & Start */

div {
  padding: 5px;
}

h1 {
  background-color: rgb(239, 200, 239);
  margin-top: 50px;
  border: solid 1px purple;
  border-radius: 30px;
  padding: 10px
}

.container {
  text-align: center;
  padding: 32px 70px 32px 70px;
  height: auto;
  width: auto;
  background-color: rgba(221, 149, 230, 0.232);
}

.info {
  text-align: center;
  float: center;
}

div.info {
  width: 500px;
  margin: auto;
  padding: 6px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}

.info-box {
  border-top: 2px solid rgb(209, 149, 196);
  border-bottom: 2px solid rgb(209, 149, 196);
  border-radius: 6px;
  width: 100%;
  display: none;
  opacity: 0;
  transform: translate(-50%, -50% scale(0.9));
}

.info-box.activateInfo {
  opacity: 1;
  background-color: white;
  pointer-events: auto;
  z-index: 5;
  display: inline-block;
  transform: translate(-50%, -50%) scale(1);
}

.info-title {
  background-color: rgba(240, 190, 243, 0.842);
}


/* Start Button */

#startButton {
  color: rgb(255, 255, 255);
  background-color: rgb(180, 102, 180);
  height: 50px;
  width: 130px;
  margin-top: 10px;
  border: inset 10px rgb(168, 93, 168);
  border-width: 3px;
  border-radius: 12px;
  cursor: pointer;
}


/* Exit & Cont. Buttons */

button {
  color: rgb(255, 255, 255);
  background-color: rgb(206, 155, 206);
  height: 45px;
  width: 74px;
  margin-top: 10px;
  border: inset 10px rgb(202, 123, 202);
  border-width: 3px;
  border-radius: 12px;
  cursor: pointer;
}

.info-box,
.buttons,
button,
.startButton {
  cursor: pointer;
  transition: all 0, 3s ease;
}

.button:hover,
button.quit:hover,
button.restart:hover,
.startButton:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(246, 230, 246);
  cursor: pointer;
  transition: all 0, 3s ease;
}
<a id="highScore">View Highscores</a>

<div class="container">
  <div id="questions">
    <h1> Coding Quiz Challenge</h1>
    <ul id="list"></ul>
  </div>
  <!--Info box-->
  <!--START QUIZ BUTTON-->
  <button type="button" id="startButton">Start Quiz</button>
  <div class="info-box">
    <div class="info-title">
      <span id="span"><b>⋆ Quiz Information ⋆</b></span>
    </div>
    <div class="info-text">
      <div class="info">This test will assess your knowledge of basic JavaScript with 5 multiple choice questions. Click the "Start" button to begin the quiz. You will have 75 seconds to complete the assessment. Your score will your be your time remaining and the number
        correct.
      </div>
      <div class="buttons">
        <button class="quit">Exit Quiz</button>
        <button class="restart">Continue</button>
      </div>
    </div>
  </div>

userurKQ0
Related