Can't figure out how to make button be selected

Question

I'm trying to make it so that you can select the buttons on my quiz but I can't figure out how. I have it set so the option to go to the next page is hidden until you select something, however, I've spent most of today trying to find a way to actually select one of the buttons. I have the hover and active events assigned in my css, but don't know what to do to actually make the button when pressed stay selected.

We aren't allowed to use external libraries like JQuery. Is angularJS considered an external library? May have to ask the professor that.

 @import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100); body { background-color: black; padding: 20px; } #myQuiz { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; width: 650px; 650px; position: relative overflow: hidden; color: white; background: black; } #myQuiz h1 { font-weight: 100; font-size 2em; margin: 0px; position: absolute; top: 25px; left: 36px; } myQuiz h1 span { display: block; font-weight: 900; font-family: 'Titillium Web', sans- serif; font-size: 3.2 em; line-height: 65px; } #myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100; } #myQuiz h3 { font-size: 2em; margin: 0px; font-weight: 100; } #myQuiz p { margin: 0px 0px 14px 0px; } #myQuiz .btn { display: inline-block; cursor: pointer; background-color: #7E3517; color: white; text-decoration: none; padding: 5px 15px; border-radius: 6px; } #myQuiz .btn:hover { background-color: white; color: black; text-decoration: none; padding: 5px 15px; border-radius: 6px; } #myQuiz .btn:active { background-color: red; color: black; text-decoration: none; padding: 5px 15px; border-radius: 6px; } #myQuiz .progress { width: 550px; position: absolute; top: 160px; left: 40px; } #myQuiz .progress div { position: relative; display: inline-block; width: 30px; height: 30px; margin-right: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); transition: background-color 1s; } #myQuiz .progress div.on, #myQuiz .progress div.answered { background-color: #ef0101; } #myQuiz .intro { position: absolute; top: 225px; left: 50px; width: 550px; } #myQuiz .intro p { margin: 0px 0px 40px 0px; } #myQuiz .question { width: 550px; position: absolute; top: 225px; left: 50px; } #myQuiz .question .text { font-size: 1.6em; margin: 0px, 0px, 20px, 0px; } #myQuiz .question .ans { display: inline-block; font-size: 1.1em; width: 225px; border: 2px solid red; border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px; } #myQuiz .question .ans.selected { border-color: blue; } #myQuiz .question.unanswered .ans { cursor: pointer; } #myQuiz .question.unanswered .ans:hover { background-color: rgba(163, 111, 155, .2); } #myQuiz .question.answered .ans { cursor: default; } #myQuiz .done { color: yellow; margin-top: 50px; transition: opacity 1.5s, margin-top 1.5s; visibility: hidden; opacity: 0; } #myQuiz .done .btn { margin-top: 5px; } myQuiz .answered . done { visibility: visible; opacity: 1; margin-top: 10px; } #myQuiz .results { position: absolute; top: 225px; left: 660px; width: 550px; } 

 <div id="myQuiz"> <h1>Spirit Animal Quiz</h1> <div class="progress"> <div class="on"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="question"> <form action=""> <p> <input type="radio" class="btn" value="male"> Rough<br></p> <p><input type="radio" class="btn" value="female"> Soft<br></p> <p> <input type="radio" class="btn" value="other"> both </p> </form> <p class="text">How would you describe your skin?</p> <p class="btn">Rough</p> <p class="btn">Smooth</p> <p class="btn">Both</p> <div class=d one> <div class="btn">Next</div> </div> </div> </div> 

Answer 1

You can use the css property display to show and hide your next button. use: display: none; to hide an element display: inline; to return to default I gave the button and ID of "nxt" for easy access, and added event listeners to all of the buttons (because I don't know which one you want pressed before revealing next) With the onClick event you can do anything that should happen after the click in the callback function.

 var btns = document.getElementsByClassName("btn"); for( var i =0; i < btns.length; i++){ btns[i].addEventListener("click", function(){ document.getElementById("nxt").style.display = "inline"; }); } 

 #nxt{ display: none; } #nxt, p.btn{ background-color: black; color: white; width : 150px; height: 40px; text-align: center; } 

 <head> <meta content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Find Out Your Spirit Animal</title> <link rel="stylesheet" type="text/css" href="quiz.css"> </head> <body> <div id= "myQuiz"> <h1>Spirit Animal Quiz</h1> <div class = "progress"> <div class="on"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class = "question"> <form action=""> <p> <input type="radio" class= "btn" value="male"> Rough<br></p> <p><input type="radio" class="btn" value="female"> Soft<br></p> <p> <input type="radio" class="btn" value="other"> both </p> </form> <p class = "text">How would you describe your skin?</p> <p class = "btn">Rough</p> <p class = "btn">Smooth</p> <p class = "btn">Both</p> <div class = done> <div class="btn" id="nxt">Next</div> </div> </div> </div> </body>