Javascriptラジオボタンの値をdiv位置に設定

OK、ここで私はクイズアプリケーションを作成しようとしていますが、何が間違っているのかを調べるのに8時間以上かかる。私はちょうどあきらめるので、できるならplsは私を助けます。状況をDOMを使用して質問の回答を選択するラジオ入力を作成し、次のをクリックするたびに別の質問がdivタグに表示され、前のdivタグは削除されます。私はすべての質問が終わった後に、アラートウィンドウでユーザーに通知するか、または何人が正しい答えを得たかについて何かを通知する方法で結果を保存します。問題は、私は何が間違っているのか分かりません。Javascriptラジオボタンの値をdiv位置に設定

answers = document.getElementsByName('quiz'); 
if(answers[1].checked){ 
     alert("gj"); 
    }

これは、ブラウザのコンソールで正常に動作し、ユーザーが選択したラジオボタンの数1.あれば、それは私に警告が、私は私のスクリプト内でこれを入れたとき、それは何もしません。私はstart（）関数全体をどのように作成したかに問題があると推測していますが、私はその頭の中で頭を囲むことができません。

完全なコード：動的クイズ

var allQuestions = [{ 
    question: "Question1?", 
    choices: ["Answer1", "Answer2", "Answer3", "Answer4"], 
    CorrectAnswer:0}, 
    { 
    question: "Question2?", 
    choices: ["Answer6", "Answer7"], 
    CorrectAnswer:0} 
    ]; 

var currentQuestion=0; 
var currentAnswer=0; 
var correctAnswer=0; 
var answers; 
var div2; 

function createDiv(){ 
    var div=document.createElement("div"); 
    div2=document.getElementById("content").appendChild(div); 
} 

function createQuestion(question){ 
    var q = document.createElement('p'); 
    q.innerHTML=question; 
    div2.appendChild(q); 
} 

function createRadio(id){ 
    var radio = document.createElement('input'); 
    radio.setAttribute("type","radio"); 
    radio.setAttribute("name","quiz"); 
    radio.setAttribute("id",id); 
    div2.appendChild(radio); 
} 

function createLabel(id,text){ 
    var lab = document.createElement('label'); 
    lab.setAttribute("id",id); 
    lab.setAttribute("for",id); 

    lab.innerHTML=text; 
    div2.appendChild(lab); 
} 

function checkAnswer(){ 
answers = document.getElementsByName('quiz'); 
if(answers[1].checked){ 
     alert("gj"); 
    } 
} 

function remover(){ //removes content for next question 

    var myNode = document.getElementById("content"); 
    while (myNode.firstChild) { 
    myNode.removeChild(myNode.firstChild); 
    } 
} 

function start(){ 

remover(); 
createDiv(); 
createQuestion(allQuestions[currentQuestion].question); 

//create all radio answers for question in div 
for (var i = 0; i<allQuestions[currentQuestion].choices.length;i++){ 
    createDiv(); 
    createRadio(allQuestions[currentQuestion].choices[i]); 
    createLabel(allQuestions[currentQuestion].choices[i],allQuestions[currentQuestion].choices[i]); 
} 

checkAnswer(); 

currentQuestion++; 

if (currentQuestion === allQuestions.length){ //just sto stop from going infinite 
currentQuestion=allQuestions.length-1; } 
} 

</script> 
</head> 
<body onload=start()> 

<div id="main"> 
<div id="content"></div> 
</div> 
<div id="butn"> 
<input type="submit" value="Start" onClick="start()"> 
</body> 
</html>

出典

2016-12-22 Energizem

これは要件を満たすことができます。次のボタンに新しい機能を追加するだけです。チェックアウトこれはいい、おかげで動作しますが、今の問題は、私はちょっとだけ一度チェックする必要があり、checkAnswer機能は、それがラジオボタンをクリックしますすべての時に実行されることをである

var allQuestions = [{ 
 
    question: "Question1?", 
 
    choices: ["Answer1", "Answer2", "Answer3", "Answer4"], 
 
    CorrectAnswer:0}, 
 
    { 
 
    question: "Question2?", 
 
    choices: ["Answer6", "Answer7"], 
 
    CorrectAnswer:0} 
 
    ]; 
 

 
var currentQuestion=0; 
 
var currentAnswer=0; 
 
var correctAnswer=0; 
 
var answers; 
 
var div2; 
 

 
function createDiv(){ 
 
    var div=document.createElement("div"); 
 
    div2=document.getElementById("content").appendChild(div); 
 
} 
 

 
function createQuestion(question){ 
 
    var q = document.createElement('p'); 
 
    q.innerHTML=question; 
 
    div2.appendChild(q); 
 
} 
 

 
function createRadio(id){ 
 
    var radio = document.createElement('input'); 
 
    radio.setAttribute("type","radio"); 
 
    radio.setAttribute("name","quiz"); 
 
    radio.setAttribute("id",id); 
 
    div2.appendChild(radio); 
 
} 
 

 
function createLabel(id,text){ 
 
    var lab = document.createElement('label'); 
 
    lab.setAttribute("id",id); 
 
    lab.setAttribute("for",id); 
 

 
    lab.innerHTML=text; 
 
    div2.appendChild(lab); 
 
} 
 

 
function checkAnswer(){ 
 
answers = document.getElementsByName('quiz'); 
 

 
if(answers[0].checked){ 
 
     alert("correct answer"); 
 
    } 
 
    else{ 
 
    alert("wrong") ; 
 
    } 
 
} 
 

 
function remover(){ //removes content for next question 
 

 
    var myNode = document.getElementById("content"); 
 
    while (myNode.firstChild) { 
 
    myNode.removeChild(myNode.firstChild); 
 
    } 
 
} 
 
function next(){ 
 
    checkAnswer(); 
 
    remover(); 
 
    start(); 
 
} 
 
function start(){ 
 

 

 
createDiv(); 
 
createQuestion(allQuestions[currentQuestion].question); 
 

 
//create all radio answers for question in div 
 
for (var i = 0; i<allQuestions[currentQuestion].choices.length;i++){ 
 
    createDiv(); 
 
    createRadio(allQuestions[currentQuestion].choices[i]); 
 
    createLabel(allQuestions[currentQuestion].choices[i],allQuestions[currentQuestion].choices[i]); 
 
} 
 

 

 

 
currentQuestion++; 
 

 
if (currentQuestion === allQuestions.length){ //just sto stop from going infinite 
 
currentQuestion=allQuestions.length-1; } 
 
}

<html> 
 
    <head> 
 
</head> 
 
<body onload="start()"> 
 

 
<div id="main"> 
 
<div id="content"></div> 
 
</div> 
 
<div id="butn"> 
 
<input type="submit" value="Start" onClick="next()"> 
 
</body> 
 
</html>

出典

2016-12-23 10:18:01

新しい要素

document.getElementsByName('quiz');

はappendChild()と動的に追加されているので、document.getElementsByNameによって検出されません。あなたはonclickイベントにごスタート機能で

radio.setAttribute("onclick","checkAnswer()");

var allQuestions = [{ 
 
    question: "Question1 ?", 
 
    choices: ["Answer1", "Answer2", "Answer3", "Answer4"], 
 
    CorrectAnswer: "Answer3" 
 
}, { 
 
    question: "Question2 ?", 
 
    choices: ["Answer6", "Answer7"], 
 
    CorrectAnswer: "Answer6" 
 
}]; 
 

 
var currentQuestion = 0; 
 
var currentAnswer = 0; 
 
var correctAnswer = 0; 
 
var answers; 
 
var div2; 
 

 
function createDiv() { 
 
    var div = document.createElement("div"); 
 
    div2 = document.getElementById("content").appendChild(div); 
 
} 
 

 
function createQuestion(question) { 
 
    var q = document.createElement('p'); 
 
    q.innerHTML = question; 
 
    div2.appendChild(q); 
 
} 
 

 
function createRadio(id) { 
 
    var radio = document.createElement('input'); 
 
    radio.setAttribute("type", "radio"); 
 
    radio.setAttribute("name", "quiz"); 
 
    radio.setAttribute("id", id); 
 
    radio.setAttribute("onclick", "checkAnswer(id)"); 
 
    div2.appendChild(radio); 
 
} 
 

 
function createLabel(id, text) { 
 
    var lab = document.createElement('label'); 
 
    lab.setAttribute("id", id); 
 
    lab.setAttribute("for", id); 
 
    lab.innerHTML = text; 
 
    div2.appendChild(lab); 
 
} 
 

 
function checkAnswer(answer) { 
 
    // do something with currentAnswer 
 
    CorrectAnswer = allQuestions[currentQuestion - 1].CorrectAnswer; 
 
    console.log("Current question: ", currentQuestion - 1); 
 
    console.log("Current answer: ", answer); 
 
    console.log("Correct answer: ", CorrectAnswer); 
 
    if (answer == CorrectAnswer) { 
 
    console.log("correct"); 
 
    } 
 
} 
 

 

 
function remover() { //removes content for next question 
 

 
    var myNode = document.getElementById("content"); 
 
    while (myNode.firstChild) { 
 
    myNode.removeChild(myNode.firstChild); 
 
    } 
 
} 
 

 
function start() { 
 
    // when clicking start button check answer 
 

 
    remover(); 
 
    createDiv(); 
 
    createQuestion(allQuestions[currentQuestion].question); 
 

 
    //create all radio answers for question in div 
 
    for (var i = 0; i < allQuestions[currentQuestion].choices.length; i++) { 
 
    createDiv(); 
 
    createRadio(allQuestions[currentQuestion].choices[i]); 
 
    createLabel(allQuestions[currentQuestion].choices[i], allQuestions[currentQuestion].choices[i]); 
 
    } 
 

 
    currentQuestion++; 
 

 
}

<div id="main"> 
 
    <div id="content"></div> 
 
</div> 
 
<div id="butn"> 
 
    <input type="submit" value="Start" onClick="start()">

出典

2016-12-22 22:33:42 user2314737

スニペット、ということは可能ですか？それとも私は完全に間違ったアプローチをしていますか？ – Energizem

@Energizem質問のリストを更新するたびにcheckAnswer関数を使用して最後の答えが正しいかどうかをチェックすることができます。また、正しい答えのカウンタを保持することもできます – user2314737

@ user2314737 "document.getElementsByNameクイズ "）; は、appendChild（）で動的に追加されますので、document.getElementsByNameで検出されません。"は正しくありません.getElementsは現在のリストをquerySelectorとして取得しないので更新します。 –

を追加することができcheckAnswerは質問がどのラジオボタンがチェックされていない時点ではレンダリングされた直後に実行されます。

あなたはcheckAnswerは、ラジオボタンがクリックされたとき、あなたはラジオボタンを作成するときにイベントハンドラを追加し、start機能では、ここではなくcheckAnswerを呼び出すことができます実行する場合。

function createRadio(id){ 
    var radio = document.createElement('input'); 
    radio.setAttribute("type","radio"); 
    radio.setAttribute("name","quiz"); 
    radio.setAttribute("id",id); 
    radio.addEventListener("click", checkAnswer); 
    div2.appendChild(radio); 
}

出典

2016-12-22 22:42:49 backpackcoder

のためのthx、これは上記と同様に動作しますが、あなたは毎回ラジオボタンをクリックすると、このようにcheckAnswerを実行することができます次のボタンをクリックする前に一度だけ実行する方法はありますか？ – Energizem

代わりに 'start'の始めに' checkAnswer'を呼び出すことができます。開始ボタンが最初にクリックされたときに呼び出す必要はありません（現在のコードを使用して、クイズボタンがあるかどうかを確認できます）。 – backpackcoder

if（document.getElementsByName（ 'quiz'）。length！= 0 ）{ checkAnswer（）; } – backpackcoder

Javascriptラジオボタンの値をdiv位置に設定

答えて

関連する問題