在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

• 两个.addEventListeners()

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

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

• 一旦确定了单击的单选按钮的ID（请参阅上一个参考），它将被推送到一个数组（例如answers[]）。

• 当用户完成后，他/她点击“完成”按钮，触发点击事件#btn1。

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

片段

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 2

<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 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>

这里为u想要什么，用最简单的方式来完成，使用CSS文档对象模型，以供参考去这里HTML CSS DOM