2016-06-26 4 views
0

Ich probiere ein einfaches Programm aus, das auf Konsole ausgibt. Alles funktioniert gut, nur unerwartet undefined und ich weiß nicht, warum ich es bekomme. Jeder bitte erklären was falsch ist und wie kann ich meinen Code besser machen. DankIch bekomme undefined in JavaScript und kann es nicht herausfinden warum

var next = document.getElementById('next'); 
 

 
var questions = 
 
[ 
 

 
    { 
 
     question: "Color of sky is ?", 
 
     choices: ["Green","White", "Blue", "Red"], 
 
     answer: 2 
 
    }, 
 
    { 
 
     question: "Color of milk is ?", 
 
     choices: ["Green","White", "Blue", "Red"], 
 
     answer: 1 
 
    }, 
 
    { 
 
     question: "Color of Grass is ?", 
 
     choices: ["Green","White", "Blue", "Red"], 
 
     answer: 0 
 
    } 
 

 
]; 
 

 
var counter = 0; 
 

 

 
function loadQuestion() { 
 
    
 
    var obj = questions[counter]; 
 
    var quest = obj.question; 
 
    var choice = obj.choices; 
 
    function options() { 
 
    choice.forEach(function(val){ 
 
     
 
     console.log(val); 
 
     return false; 
 
    }); 
 
    } 
 
    var answer = obj.answer; 
 
    
 
    counter++; 
 
    
 
    console.log (" Question : " + quest); 
 
    console.log(options()); 
 
    console.log(answer); 
 
} 
 

 
next.onclick = function() { 
 
    if (counter < questions.length) { 
 
    loadQuestion(); 
 
    } 
 
};
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    <div id="quiz-container"> 
 
    <button id="next"> Next Question </button> 
 
    </div> 
 
    
 
</body> 
 
</html>

+0

console.log (options()) funktioniert nicht. Probieren Sie einfach options() und entfernen Sie die Rückgabe false in der Optionsfunktion –

+0

dank @Jonas w es jetzt funktioniert. – knight

+0

können Sie mir bitte helfen, wie kann ich readio Tasten mit Optionen Funktionswerte erstellen? – knight

Antwort

2

Warum Sie tun:

console.log(options()); 

in options Funktion, die Sie bereits die Optionen drucken, so dass Sie diese Zeile mit nur ersetzen sollte:

options(); 

und wenn Sie sich fragen, warum es 012 drucktweil options Funktion ist nichts zurückgeben (return false ist nur die Rückkehr für forEach Rückruf für jedes Element), wenn Sie die folgenden es tun true drucken statt undefined:

function options() { 
    choice.forEach(function(val){ 

    console.log(val); 
    return false; 
    }); 
    return true; 
} 

Beispiel:

function a(){} 
console.log(a()); //undefined 

function a(){return 1;} 
console.log(a()); // 1 
0

Wie alle anderen sagten, können Sie eine Funktion nicht per Konsole anmelden. Führen Sie einfach die options() nach den Fragen Drucken wie diese

---snip--- 
console.log('Question: ' + quest); 
options(); // print options 
console.log('Answer: ' + answer); 
---snip--- 

Es gibt viele Möglichkeiten, Radiobuttons aus der Liste der Auswahlmöglichkeiten zu generieren. Ich habe eine Art zur Verfügung gestellt, die ich gerne benutze, unten.

Ich habe angenommen, dass es ein `Taste Element in Ihrem Formular

--- snip --- 
function generateQuestion(parent, question) { 
    var h3_ = document.createElement('h3'); 
    var question_ = document.createTextNode(question); 
    h3_.appendChild(question_); 
    parent.insertBefore(h3_, parent.firstChild); 
} 

function generateOptions(parent,options) { 

    options.forEach(function(val){ 
     parent.insertBefore(
      makeSpan(makeRadioButtons('choice',val), val), 
      parent.firstChild // the button element 
     ); 
    }); 
} 

function makeRadioButtons(name_, value_) { 
    var radio_b = document.createElement("input"); 
    radio_b.setAttribute('type','radio'); 
    radio_b.setAttribute('name',name_); 
    radio_b.setAttribute('value',value_); 
    return radio_b; 
} 

function makeSpan(radio_button, value) { 
    var span_ = document.createElement('span'); 
    var text_ = document.createTextNode(value); 
    span_.appendChild(radio_button); 
    span_.appendChild(text_); 
    return span_; 
} 

//get my form 
var my_form = document.getElementById('my_form'); 

function loadQuestion() { 
    ---snip--- 
    generateOptions(my_form, choice); 
    generateQuestion(my_form, quest); 
    ---snip--- 
} 

Es gibt mehr Möglichkeiten, mit Schnur, aber ich finde, diejenigen später schwer zu pflegen. Hier ist das Arbeitsbeispiel des oben angegebenen Codes: https://jsfiddle.net/04hruhyo/

Verwandte Themen