使用 Javascript onload 填充 HTML

Question

我正在尝试创建一个基本的测验网页。我在这里阅读了一些文章，但是我编写的大部分 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 值，我原样离开了，所以我不会再破坏它了:)

正如我所说，我确实阅读并从多个来源学习，包括 Whosebug，所以如果我错过了任何可能有帮助的问题，我会提前道歉。也在此先感谢。

[EDIT] 这是 fiddle 编辑代码 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)：

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

它将return一个对象分配给变量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开始，所以第一个单选按钮是radios[0]，第二个单选按钮是radios[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 代码中还有一个问题：您正在尝试访问无线电类型输入元素的属性 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 填充 HTML

Populating HTML with Javascript onload

javascript

html

innerhtml

onload

forms