Getting random values from objects inside an array by clicking a button

Question

I need to a get a random string from the objects inside an array when you click the button. But for some reason my code is not executing.

var quotes = [{
    quote: "Quote1",
    source: "Source1"
  },
  {
    quote: "Quote2",
    source: "Source2"
  },
  {
    quote: "Quote3",
    source: "Source3"
  },
  {
    quote: "Quote4",
    source: "Source4"
  },
  {
    quote: "Quote5",
    source: "Source5"
  }
];

function getRandomquote() {
  var randomindex = Math.floor(Math.random() * (quotes.length));
  var quotesarr = quotes[randomindex];
  var objquote = quotesarr.quote;
  var objsource = quotesarr.source;

  document.getElementById("quote").innerHTML = objquote;
  document.getElementById("source").innerHTML = objsource;
}

function printQuote() {
  document.getElementById("loadQuote").onclick = getRandomquote;
}
printQuote();

<div class="container">
  <div id="quote-box">
    <p class="quote"> hello</p>
    <p class="source"> hello</p>
  </div>
  <button id="loadQuote" onclick="printQuote();">Show another quote</button>

I am getting this error message:

Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.getRandomquote (randomtest1.js:27)

Update after answers below

I changed getElementById to getElementsByClassName, and now there are no error messages.

But when I click the button, it does not change the elements. I believe I have made a mistake on the printQuote function. I cannot figure it out.

DomeTune · Accepted Answer · 2017-02-27 11:18:26Z

1

You'll need to add the ids to the elements as below. Or use getElementsByClassName() or use querySelector(".quote").

var objquote = "Hello";
var objsource = "World";
document.getElementById("quote").innerHTML=objquote;
document.getElementById("source").innerHTML=objsource;

<div id="quote-box">
  <p id="quote" class="quote"> hello</p>
  <p id="source" class="source"> hello</p>
</div>

answered Feb 27, 2017 at 11:18

DomeTune

1,44111 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G0dsquad · Accepted Answer · 2017-02-27 11:20:05Z

1

You can't use getElementById to retrieve an element by its class. You'll need to specify an id or use getElementsByClassName- https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

var els = document.getElementsByClassName('test')
console.log(els.length)

<div class="test"></div>

In your example:

<p class="quote" id="quote"> hello</p>
<p class="source" id="source"> hello</p>

edited Feb 27, 2017 at 11:20

answered Feb 27, 2017 at 11:14

G0dsquad

4,4752 gold badges19 silver badges23 bronze badges

Comments

Jijo Cleetus · Accepted Answer · 2017-02-28 06:42:32Z

1

Please find the working code below. i have removed unwanted functions.

html

<div id="quote-box">
  <p class="quote">hello</p>
  <p class="source">hello</p>
</div>
<button id="loadQuote" onclick="getRandomquote();">Show another quote</button>

js

var quotes=[
{quote:"Quote1", source:"Source1"},
{quote:"Quote2", source:"Source2"},
{quote:"Quote3", source:"Source3"},
{quote:"Quote4", source:"Source4"},
{quote:"Quote5", source:"Source5"}
        ];
getRandomquote=function(){

var randomindex=Math.floor(Math.random()*(quotes.length));  
var quotesarr=quotes[randomindex];
document.getElementsByClassName("quote")[0].innerHTML=quotesarr.quote;
document.getElementsByClassName("source")[0].innerHTML=quotesarr.source;
}

edited Feb 28, 2017 at 6:42

answered Feb 27, 2017 at 11:32

Jijo Cleetus

2,8671 gold badge13 silver badges19 bronze badges

8 Comments

alex472 Over a year ago

when i click the button nothing happens with your code, but if i document.write just the quotesarr.quote and quotesarr,source seperately, it prints to the screen.

Jijo Cleetus Over a year ago

Its actually working. I have created a working pen and take a look in to it codepen.io/jijocleetus/pen/ZeGvyv

Jijo Cleetus Over a year ago

Please check the above link and let me know if there is any issue.

alex472 Over a year ago

Jijo, the problem is when i change the id attribute inside html and use getelementbyid in js, it works. but if i change it to class, it is not working.

Jijo Cleetus Over a year ago

@alex472, I have identified the issue with getElementsByClassName property. If you use getElementsByClassName it will create an array of html elements. So if you use getElementsByClassName("quote") it will be an array with legth 0 since there is only one element with class="quote" so in norder to access it you need to provide the array element . In your case document.getElementsByClassName("quote")[0].innerHTML=quotesarr.quote;. updated pen is given below. codepen.io/jijocleetus/pen/ZeGvyv

|

Sumeet kumar · Accepted Answer · 2017-02-27 11:18:34Z

0

you have not set id in your p tag ...please set id='quote' and it should start working.

answered Feb 27, 2017 at 11:18

Sumeet kumar

497 bronze badges

Comments

alex472 · Accepted Answer · 2017-02-27 11:23:08Z

0

I changed getElementById to getElementsByClassName, and now there are no error messages.

But when I click the button, it does not change the elements. I believe I have made a mistake on the printQuote function. I cannot figure it out.

answered Feb 27, 2017 at 11:23

alex472

251 silver badge10 bronze badges

2 Comments

G0dsquad Over a year ago

All you do is re-assign the onclick event which doesn't do anything. Just call getRandomquote() instead of document.getElementById("loadQuote").onclick = getRandomquote;. Also it would be better to add this answer as a further edit to your question. :)

alex472 Over a year ago

after the reassignment, the button is still not functioning.

Collectives™ on Stack Overflow

Getting random values from objects inside an array by clicking a button

5 Answers 5

Comments

Comments

8 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

8 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related