Question

我正在尝试创建一个基本的quizz网页。我在这里阅读了一些文章，但是我写的大部分javascript代码都是通过书籍和视频教程学到的，所以我很困惑为什么它们不起作用。这是HTML：

<!DOCTYPE HTML>
<html>

  <head>

    <title>Quizz</title>

    <script type = "text/javascript" src = "script.js"></script>
  </head>

  <body onload="init(); postaviPitanje();">
    <div id="title">
      <span>&nbsp;Quizz</span>
    <div> <!--end title-->
    <div id="form">
      <form>
        <fieldset>
          <legend id="legend">
            Question <span id="brPitanja"></span><!--span in wich a question number is sent-->
          </legend>

          <p id="pitanjeTxt"></p><!--question text field-->
          <p><input type="radio" name="odgovor" id ="odg1" value ="1"/></p><!--question 1-->
          <p><input type="radio" name="odgovor" id ="odg2" value ="2"/></p><!--question 2-->
          <p><input type="radio" name="odgovor" id ="odg3" value ="3"/></p><!--question 3-->
          <p><input type="radio" name="odgovor" id ="odg4" value ="4"/></p><!--question 4-->
        </fieldset>
      </form>
    <div><!--end form-->
  </body>
</html>

下面的Javascript代码不完整，因为它甚至没有在加载时填充第一个问题。之后我会添加额外的逻辑，但是当我被困在这里时，我没有超越测试版本的初始功能：

function init() {
  //question number on start
  var brojPitanja = 0;

  //span with question No into a variable
  var brPitanjaSpan = document.getElementById("brPitanja");

  //p with question teks into a variable
  var tekstPitanjaParagraph = document.getElementById("pitanjeTxt");

  //radio buttons into variables
  var radio1 = document.getElementById("odg1");
  var radio2 = document.getElementById("odg2");
  var radio3 = document.getElementById("odg3");
  var radio4 = document.getElementById("odg4");

  //question object initialization function
  function pitanje (br, txt, a, b, c, d, t) { //br - question number;
                                              //txt- question text;
                                              //a, b, c, d - possible answers; 
                                              //t - int value for correct answer;
    this.number = br;
    this.text = txt;
    this.answ1 = a;
    this.answ2 = b;
    this.answ3 = c;
    this.answ4 = d;
    this.correct = t;
  }

  //question objects
  var p1 = new pitanje(1, "Whats my name?", "marko", "lazar", "perisa", "bogdan", 1);
  var p2 = new pitanje(2, "How old I am?", "25", "24", "22", "21", 3);

  //question array
  var nizPitanja = new Array (p1, p2);
}
//setting question onto document
function postaviPitanje() {
  var current = nizPitanja[brojPitanja]; //current cuestion
  brPitanjaSpan.innerHTML = "" + brojPitanja; //place question number in question title
  tekstPitanjaParagraph.innerHTML = current.text; //place question text in HTML

  //fill radiobuttons with question text
  radio1.innerHTML = current.answ1;
  radio2.innerHTML = current.answ2;
  radio3.innerHTML = current.answ3;
  radio4.innerHTML = current.answ4;

}

问题是该页面仅显示HTML中已有的文本。我很感激任何帮助，因为我刚开始使用Javascript，所以我自己无法调试。而且，我把一切都变成了英语。有些东西，比如id值，我离开了，所以我不会打破它更多：）

正如我所说的那样，我确实阅读并从几个来源学习，包括stackoverflow，所以如果我错过了任何可以帮助并做出双重的问题，我会事先道歉。并且还要提前感谢。

[编辑]以下是编辑代码https://jsfiddle.net/uazntz1u/1/

的小提琴

Answer 1

问题是您在init()

中定义了问题和答案数组

var nizPitanja = new Array (p1, p2);

此变量的范围是函数本身（var），并且无法在外面的任何地方访问。

只需在init()上方声明，以便postaviPitanje()可以访问它。

var nizPitanja=null; 

init(); // Assign it inside init() without var. 

postaviPitanje();

更多关于变量范围的信息 What is the scope of variables in JavaScript?

Answer 2

以下是我建议做的事情：

var quiz = (function () {
    //question number on start
    var brojPitanja = 0;

    //span with question No into a variable
    var brPitanjaSpan = document.getElementById("brPitanja");

    //p with question teks into a variable
    var tekstPitanjaParagraph = document.getElementById("pitanjeTxt");

    //radio buttons into variables
    var radio1 = document.getElementById("odg1");
    var radio2 = document.getElementById("odg2");
    var radio3 = document.getElementById("odg3");
    var radio4 = document.getElementById("odg4");

    //question object initialization function
    function Pitanje (br, txt, a, b, c, d, t) {
        //br - question number;
        //txt- question text;
        //a, b, c, d - possible answers; 
        //t - int value for correct answer;

        // remark: change the lines below so that you
        // have the same variable names like the parameters

        this.number = br;
        this.text = txt;
        this.answ1 = a;
        this.answ2 = b;
        this.answ3 = c;
        this.answ4 = d;
        this.correct = t;
    }

    //question objects
    var p1 = new Pitanje(1, "Whats my name?",
                         "marko", "lazar", "perisa", "bogdan", 1);
    var p2 = new Pitanje(2, "How old I am?",
                         "25", "24", "22", "21", 3);

    // you can remove this:
    //question array
    //var nizPitanja = new Array (p1, p2);

    return {
        brojPitanja : brojPitanja,
        brPitanjaSpan : brPitanjaSpan,
        textPitanjaSpan : textPitanjaParagraph,
        radios : [radio1, radio2, radio3, radio4],
        nizPitanja : [p1, p2]
    }
})();

现在这是一个立即调用的函数表达式（IIFE）：

notifyDataSetChanged()

它将返回一个分配给变量quiz的对象，这是您唯一的全局变量，因此您不会污染所有变量不必要的全局范围。

现在你可以重写你的功能来提出问题：

function postaviPitanje() {
    var current = quiz.nizPitanja[quiz.brojPitanja]; //current cuestion
    quiz.brPitanjaSpan.innerHTML = "" + quiz.brojPitanja; //place question number in question title
    quiz.tekstPitanjaParagraph.innerHTML = current.text; //place question text in HTML

    //fill radiobuttons with question text
    quiz.radios[0].innerHTML = current.answ1;
    quiz.radios[1].innerHTML = current.answ2;
    quiz.radios[2].innerHTML = current.answ3;
    quiz.radios[3].innerHTML = current.answ4;
}

关于radios你肯定知道数组索引从0开始，所以第一个单选按钮是无线电[0]，第二个无线电[1]，依此类推。

在您的HTML文件中进行以下更改：

<script type="text/javascript" src="script.js"></script>
<!-- add here these lines -->
<script type="text/javascript">
    window.onload = postaviPitanje; // important: without braces
</script>

并改变这一点：

<body onload="init(); postaviPitanje();">

为：

<body>

整个代码当然可以更好地重构，但解释这么多东西需要很长时间。既然你说你还是初学者，这应该会让你知道如何更好地组织你的代码。

编辑：

您的HTML和JavaScript代码还有一个问题：您正在尝试访问radio类型的输入元素的属性innerHTML。但这是不可能的。将代码更改为：

<p>
    <input type="radio" name="odgovor" id ="odg1" value ="1"/>
    <label for="odg1" id="odg1_label"></label>
</p>
<p>
    <input type="radio" name="odgovor" id ="odg2" value ="2"/>
    <label for="odg2" id="odg2_label"></label>
</p>
<p>
    <input type="radio" name="odgovor" id ="odg3" value ="3"/>
    <label for="odg3" id="odg3_label"></label>
</p>
<p>
    <input type="radio" name="odgovor" id ="odg4" value ="4"/>
    <label for="odg4" id="odg4_label"></label>
</p>

然后在JS代码中获取标签：

var radio1 = document.getElementById("odg1_label");
var radio2 = document.getElementById("odg2_label");
var radio3 = document.getElementById("odg3_label");
var radio4 = document.getElementById("odg4_label");

现在可以设置标签的属性innerHTML。这将导致将答案选项（'marko'，'lazar'，'perisa'，'bogdan'）放在您想要的位置。

使用Javascript onload

2 个答案: