javascript - 无法弄清楚如何选择按钮

Question

我正在努力做到这一点，以便您可以在我的测验中选择按钮，但我不知道如何操作。我已将其设置为隐藏进入下一页的选项，直到您选择某些内容为止，但是，我今天大部分时间都在尝试找到一种方法来实际选择其中一个按钮。我在我的 css 中分配了悬停和事件事件，但不知道如何在按下时真正使按钮保持选中状态。

我们不允许使用 JQuery 等外部库。 angularJS 是否被视为外部库？可能要问教授了。

@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

您可以使用 css 属性 display 来显示和隐藏您的下一个按钮。使用: display: none; 隐藏一个元素 display: inline; 返回默认值我给了按钮和“nxt”的 ID 以便于访问，并为所有按钮添加了事件监听器(因为在显示下一个按钮之前我不知道你想按下哪个按钮)使用 onClick 事件你可以做任何应该发生的事情单击回调函数后。

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>