我正在尝试创建一个基本的测验网页。我在这里读了一些文章，但我编写的大部分 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> 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，因此，如果我错过了任何可以提供帮助并加倍的问题，我会提前道歉。也提前致谢。
[编辑] 这是编辑代码的 fiddle https://jsfiddle.net/uazntz1u/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?
关于javascript - 使用 Javascript onload 填充 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31775241/