我在 JavaScript 中变得未定义，无法弄清楚为什么答案

【问题标题】：I am getting undefined in JavaScript and can't figure it out why我在 JavaScript 中变得未定义，无法弄清楚为什么
【发布时间】：2016-10-28 13:54:39
【问题描述】：

我正在尝试一个输出到控制台的简单程序。一切正常，只是变得意外未定义，我不知道为什么会得到它。任何人都请解释什么是错的，我怎样才能让我的代码更好。谢谢

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>

【问题讨论】：

console.log( options() ) 不起作用。尝试仅 options() 并删除选项函数中的 return false
感谢@Jonas 现在可以使用了。
你能指导我如何创建带有选项功能值的读取按钮吗？
打开另一个问题 -> 得到另一个答案

标签： javascript arrays loops object foreach

【解决方案1】：

你为什么这样做：

console.log( options() );

在options 函数中，您已经打印了选项，因此您应该仅将此行替换为：

options();

如果你想知道为什么它打印 undefined 因为 options 函数什么都不返回（返回 false 只是每个项目的 forEach 回调的返回），如果你执行以下操作，它将打印 true 而不是undefined:

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

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

例子：

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

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

【讨论】：

【解决方案2】：

就像大家说的，你不能 console.log 一个函数。打印这样的问题后，只需运行options()

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

有多种方法可以从您的选择列表中生成单选按钮。我在下面提供了一种我喜欢使用的方法。

我假设你的表单中有一个 `button 元素

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

还有更多使用字符串的方法，但我发现这些方法以后很难维护。这是上面提供的代码的工作示例：https://jsfiddle.net/04hruhyo/

【讨论】：