Question

当您单击按钮时，我需要从数组内的对象中获取随机字符串。但由于某些原因，我的代码没有执行。

＆＃13;

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();

＆＃13;

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

＆＃13;

我收到此错误消息：

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null 在HTMLButtonElement.getRandomquote（randomtest1.js：27）

以下答案后更新

我将getElementById更改为getElementsByClassName，现在没有错误消息。

但是当我点击按钮时，它不会改变元素。我相信我在printQuote函数上犯了一个错误。我无法理解。

Answer 1

您无法使用getElementById按class检索元素。您需要指定id或使用getElementsByClassName - https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

＆＃13;

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

＆＃13;

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

＆＃13;

在你的例子中：

<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

请在下面找到工作代码。我删除了不需要的功能。

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 =＆＃39;引用＆＃39;它应该开始工作。

Answer 5

我将getElementById更改为getElementsByClassName，现在没有错误消息。

但是当我点击按钮时，它不会改变元素。我相信我在printQuote函数上犯了一个错误。我无法理解。

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

5 个答案: