使用 Javascript onload 填充 HTML

Posted 2023-05-07

技术标签:

【中文标题】使用 Javascript onload 填充 HTML【英文标题】：Populating HTML with Javascript onload 【发布时间】：2015-10-24 20:22:17 【问题描述】：

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

正如我所说，我确实阅读并学习了多个来源，包括 ***，所以如果我错过了任何可以帮助并提出双重问题的问题，我提前道歉。也提前致谢。

[EDIT] 这是编辑代码https://jsfiddle.net/uazntz1u/1/的小提琴

【问题讨论】：

您的代码中有几处对我来说似乎不太合乎逻辑：函数init 不返回任何值，并且其中的所有变量都仅在其自己的范围内，对postaviPitanje。因此，当您尝试执行nizPitanja[brojPitanja] 时，它应该会返回一些错误，因为这两个变量在postaviPitanje 中是不可见的。此外，构造函数按照约定用大写字母书写：function Pitanje，并且您应该使用相同的变量名，例如 this.broj = broj 或 this.odgovor1=odgovor1。我会在小提琴中更改它。谢谢。还有一个问题 - 如果我将 (br, txt, a, b, c, d, t) 传递给“pitanje”，我是否将其更改为 (number, text, answ1, answ2, answ3, answ4, 正确)然后在体内也是如此，还是我弄错了？我有一个模糊的java背景，所以我对这里发生的事情有一个原则性的想法，尽管我从未广泛使用它。 @dzenesiz 是的，你可以这样做.. 你还应该在 Javascript 中阅读这个 OOPS code.tutsplus.com/tutorials/… 【参考方案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?

【讨论】：

【参考方案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

它将返回一个分配给变量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 代码中还有一个问题：您正试图访问 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 填充 HTML的主要内容，如果未能解决你的问题，请参考以下文章

Javascript换行文本区域

如何在 jsf 中预填充 h:inputText

JavaScript中window.onload的使用方法

vue.js中怎样用onload事件

如何在页面加载时调用 JavaScript 函数？

使用 Selenium 在页面的 onload() 中生成的 JavaScript 警报的解决方法是啥？