通过单击按钮从数组内的对象获取随机值

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.

Answer 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>

Answer 2

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> 

Answer 3

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

Answer 4

您尚未在p标签中设置id ...请设置id ='quote'并且它应该开始工作。

Answer 5

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.