在 HTML 中添加一个按钮

Question

我想制作一份问卷，询问问题，然后在页面末尾有一个名为“显示答案”的按钮，该按钮将向用户显示他们得到正确的答案。

如果我用这个问题举例：

<p class="question">1. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>                   
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>       
</ul>  

我将如何为此代码创建一个按钮，当按下该按钮时，它会告诉答案是否正确？

Answer 1

<p class="question">1. What is the answer to this question?</p>        

<ul id="answers" class="answers">            
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>                   
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
<input type="button" value="submit" onClick="showAnswer()" />       
</ul>

<span id="info"></span>

然后在那段代码上面添加一个脚本：

<script>
    function showAnswer(){
        if(document.getElementById('q1a').checked){
            document.getElementById('info').innerHTML = "Correct!";
        }else{
            document.getElementById('info').innerHTML = "Incorrect!";
        }
    }
</script>

我不知道你的测验答案，所以在这种情况下，答案 1 是正确的。

Answer 2

• 两个.addEventListeners()

  • 容器上的一个包含所有问题和答案（例如#QA1）
  • 完成测验时使用的按钮上的另一个（例如#btn1）

• 当用户选择一个答案时，#QA1 将监听对任何单选按钮的任何点击（例如.answers）。对多个event.targets（即单击的元素）使用单个事件侦听器比在每个单选按钮上添加一个事件侦听器要高效得多。通过比较实际点击的内容（单选按钮）和带有监听器的元素，我们可以得到单选按钮的 id。看到这个article for details。

• 一旦确定了单击的单选按钮的 id（参见前面的参考资料），它就会被推送到一个数组中（例如 answers[]）。

• 用户完成后点击“DONE”按钮，触发#btn1的点击事件。

  • for 循环用于迭代 answer[] 和 key[] 数组。在每次迭代（即循环）中，都会比较两者的匹配元素。
  • 结果打印在 #out1 上，这是一个嵌套在有序列表 (<ol>) 中的 <output> 元素。

片段

var qa = document.getElementById('QA1');
var btn1 = document.getElementById('btn1');
var answers = [];
var key = ['q1c', 'q2a', 'q3d'];

qa.addEventListener('click', function(event) {
  if (event.target != event.currentTarget) {
    var choice = event.target.id;
    answers.push(choice);
  }
  event.stopPropagation();
}, false);

btn1.addEventListener('click', function(event) {
  event.preventDefault();
  var qList = document.getElementsByClassName('question');
  var out1 = document.getElementById('out1');

  for (var i = 0; i < qList.length; i++) {
    if (answers[i] === key[i]) {
      out1.innerHTML += '<li>' + answers[i] + ' is correct</li>';
    } else {
      out1.innerHTML += '<li>' + answers[i] + ' is incorrect, the correct answer is ' + key[i] + '</li>';
    }
  }
}, false);

body {
  font: 400 16px/1.45'Verdana';
}
* {
  font: inherit;
}
.question {
  margin-bottom: 15px;
}
.answers {
  list-style: none;
}
.answers li {
  margin-left: -15px;
}
input[type="radio"] {
  position: relative;
  top: 2.25px;
}
#btn1 a {
  text-decoration: none;
}
#out1 {

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<ol id="QA1" class="QA">
  <li id="q1" class="question">What is the answer to this question?

    <ol class="answers">

      <li>a.
        <input type="radio" name="q1" value="a" id="q1a" />
        <label for="q1a">Answer</label>
      </li>

      <li>b.
        <input type="radio" name="q1" value="b" id="q1b" />
        <label for="q1b">Answer</label>
      </li>

      <li>c.
        <input type="radio" name="q1" value="c" id="q1c" />
        <label for="q1c">Answer</label>
      </li>

      <li>d.
        <input type="radio" name="q1" value="d" id="q1d" />
        <label for="q1d">Answer</label>
      </li>

    </ol>
    <!--answers-->

  </li>
  <!--question-->
  <li id="q2" class="question">What is the answer to this question?

    <ol class="answers">

      <li>a.
        <input type="radio" name="q2" value="a" id="q2a" />
        <label for="q2a">Answer</label>
      </li>

      <li>b.
        <input type="radio" name="q2" value="b" id="q2b" />
        <label for="q2b">Answer</label>
      </li>

      <li>c.
        <input type="radio" name="q2" value="c" id="q2c" />
        <label for="q2c">Answer</label>
      </li>

      <li>d.
        <input type="radio" name="q2" value="d" id="q2d" />
        <label for="q2d">Answer</label>
      </li>

    </ol>
    <!--answers-->

  </li>
  <!--question-->
  <li id="q3" class="question">What is the answer to this question?

    <ol class="answers">

      <li>a.
        <input type="radio" name="q3" value="a" id="q3a" />
        <label for="q3a">Answer</label>
      </li>

      <li>b.
        <input type="radio" name="q3" value="b" id="q3b" />
        <label for="q3b">Answer</label>
      </li>

      <li>c.
        <input type="radio" name="q3" value="c" id="q3c" />
        <label for="q3c">Answer</label>
      </li>

      <li>d.
        <input type="radio" name="q3" value="d" id="q3d" />
        <label for="q3d">Answer</label>
      </li>

    </ol>
    <!--answers-->

  </li>
  <!--question-->

</ol>
<!--QA-->
<button id="btn1"><a href="">DONE</a>
</button>
<ol>
  <output id="out1"></output>
</ol>

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Questionare</title>
 
</head>
<body>
<p>1. What is the answer to this question?</p>     
  
  <ul onclick="man()">
<input type="radio" name="q1" value="a">Answer 1<br/>               <input type="radio" name="q1" value="b">Answer 2<br/>            
<input type="radio" name="q1" value="c">Answer 3<br/>            
<input type="radio" name="q1" value="d">Answer 4<br/>       
  </ul>
  <p id="m"></p>
<script>
  var man = function(){
    document.getElementById("m").innerHTML = 'The correct answer is: Answer 1';
  }
  </script>
</body>
</html>

这是你想要的，以最简单的方式完成，使用 CSS Document 对象模型，供参考去这里HTML CSS DOM