Cannot get output Javascript to html correctly

Question

I have tried several methods to make this print randomly inside an html paragraph but it's not working correctly.
Can someone please help me fix the problem?

var randomPicker = Math.floor(Math.random() * 5);
var quotesArray = [];

function Quotes(quote, author) {
    this.quote = quote;
    this.author = author;  
}

quotesArray[0] = new Quotes("Great minds discuss ideas; average minds discuss events; small minds discuss people.", "Eleanor Roosevelt");
quotesArray[1] = new Quotes("To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.", "Ralph Waldo Emerson");
quotesArray[2] = new Quotes("Great things are done by a series of small things brought together.", "Vincent Van Gogh");
quotesArray[3] = new Quotes("Some are born great, some achieve greatness, and some have greatness thrust upon them.", "William Shakespeare");
quotesArray[4] = new Quotes("A tiger does not shout its tigritude, it acts.", "Wole Soyinka");
quotesArray[5] = new Quotes("Thinking start with a problem and ends in a solution.", "Dr. Edward de Bono");


var rand = quotesArray[randomPicker];

function printQuote(){
for (var q in rand){

console.log(rand[q]); //works well but

//this
// document.getElementById("msg").innerHTML = rand[q];
//not working...
    }
}
//this also not working...
document.getElementById("msg").innerHTHL = printQuote();

Thanks in advance.

Answer 1

The reason it didn't work was that the elements of your quotesArray were not strings but rather objects themselves. You need to access the properties inside these objects to get to the strings.

 var randomPicker = Math.floor(Math.random() * 5); var quotesArray = []; function Quotes(quote, author) { this.quote = quote; this.author = author; } quotesArray[0] = new Quotes("Great minds discuss ideas; average minds discuss events; small minds discuss people.", "Eleanor Roosevelt"); quotesArray[1] = new Quotes("To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.", "Ralph Waldo Emerson"); quotesArray[2] = new Quotes("Great things are done by a series of small things brought together.", "Vincent Van Gogh"); quotesArray[3] = new Quotes("Some are born great, some achieve greatness, and some have greatness thrust upon them.", "William Shakespeare"); quotesArray[4] = new Quotes("A tiger does not shout its tigritude, it acts.", "Wole Soyinka"); quotesArray[5] = new Quotes("Thinking start with a problem and ends in a solution.", "Dr. Edward de Bono"); var rand = quotesArray[randomPicker]; function printQuote() { document.getElementById("quote").innerHTML = rand.quote; document.getElementById("author").innerHTML = rand.author; } printQuote(); 

 <p id="quote"></p> <p id="author"></p> 

Edit: When creating a new object in JavaScript, it is probably a better idea to use singular names for the object name, instead of plural.

function Quotes should be function Quote . Likewise, new Quotes should be new Quote .

This is just a convention.