通過單擊按鈕從數組內的對象獲取隨機值

Question

當您單擊按鈕時，需要從數組內部的對象中獲取一個隨機字符串。但由於某種原因，我的代碼沒有執行。

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>

我收到此錯誤信息：答案後

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

更新下面

我改變getElementById到getElementsByClassName，現在有沒有錯誤信息。

但是，當我點擊按鈕，它不會更改元素。我相信我在printQuote函數上犯了一個錯誤。我想不明白。

Answer 1

您不能使用getElementById通過其class檢索元素。你需要指定一個id或使用getElementsByClassName - https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

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

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

在您的例子：

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

Answer 2

你需要的ID添加到要素如下。或使用getElementsByClassName()或使用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

您還沒有設置ID在p標籤...請設置ID = '報價'，它應該開始工作。

Answer 4

我將getElementById更改爲getElementsByClassName，現在沒有錯誤消息。

但是，當我點擊按鈕，它不會更改元素。我相信我在printQuote函數上犯了一個錯誤。我想不明白。

Answer 5

請在下面找到工作代碼。我已刪除不需要的功能。

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