Populating HTML with JavaScript onload
15:14 02 Aug 2015

I am trying to create a basic quiz webpage. I read some articles here, but most of the JavaScript code that I wrote I learned through books and video tutorials, so I am very confused with why they won't work. Here is the HTML:




  

    Quizz

    
  
  
  
    
 Quizz
Question

The JavaScript code below is incomplete because it didn't even populate the first question on load. I was going to add additional logic afterwards, but as I'm stuck here, I didn't move past the initial function of the test version:

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

The problem is that the page displays only that text that is already in HTML. I would appreciate any help as I'm just starting with JavaScript, so I can't debug this myself. Also, I changed everything I could to English. Some things, like id values, I left as they were so I don't break it even more.

As I said, I did read and learn from several sources, including stackoverflow, so if I missed any question that could help and made a double, I apologize in advance. And thanks in advance, also.

[EDIT] Here is the fiddle with edited code https://jsfiddle.net/uazntz1u/1/

javascript html innerhtml onload forms