Question

我正在尝试将我的函数GetQuotes()附加到按钮上。每次单击该按钮，它都会显示新文本，或者在这种情况下显示新引号。目前，该按钮仅显示undefined的答案。

我的逻辑是创建一个带引号字符串的数组。我首先尝试使用for循环生成随机引号。但是，这显然没有任何意义。然后我使用Math.random()生成随机引号。然后，我尝试将h2类称为stuff。该按钮名为quotes。单击按钮时，它会更改h2中的文本。

这是Javascript：

function getQuotes(){ 
  var quotes = [ 
    "Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.Buddha",
    "Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.Unknown",
    "To be happy, we must not be too concerned with others.Albert Camus",
    "If you want happiness for an hour — take a nap.If you want happiness for a day — go fishing.If you want happiness for a year — inherit a fortune.If you want happiness for a lifetime — help someone else."
  ]

  var result = quotes[Math.floor(Math.random() * quotes.length)]; 

  document.getElementById("stuff").innerHTML = result; 
}

这是jQuery：

$(document).on('click', '#quotes', function() {
    document.getElementById("stuff").innerHTML = getQuotes();
});

HTML：

<div class="row">
  <div class="col-12-xs">
    <h2 id="stuff" class="text-center"><em> Here is some Text </em> </h2>
  </div>
</div>

Answer 1

你的功能没有返回任何内容，所以JS会给你undefined。因为你的函数的最后一行是直接设置元素，然后jQuery处理程序再次设置它（未定义），你最终会丢失值并且只看到未定义。

您目前正在做的主要是：

// as part of getQuotes:
  document.getElementById("stuff").innerHTML = result; 
  // return undefined;

// in the handler
document.getElementById("stuff").innerHTML = undefined; // the output from getQuotes

您可以将您的功能更改为：

function getQuotes(){ 
  var quotes = [ "Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.Buddha",
"Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.Unknown",
"To be happy, we must not be too concerned with others.Albert Camus",
"If you want happiness for an hour — take a nap.If you want happiness for a day — go fishing.If you want happiness for a year — inherit a fortune.If you want happiness for a lifetime — help someone else."]

return quotes[Math.floor(Math.random() * quotes.length)]; 
}

或者您可以将innerHTML = foo保留在您的函数中并将jQuery处理程序更改为：

$(document).on('click', '#quotes', function() {
    getQuotes();
});

Answer 2

getQuotes最后应return result，而不是设置stuff div的innerHTML。

按照目前的情况，getQuotes设置stuff div的innerHTML并返回undefined（因为它没有显式的return语句）。在那之后，你的onclick处理程序用undefined

覆盖innerHTML

或者，您可以从getQuotes设置innerHTML，而不是在您的点击处理程序中设置，但我认为这不是一个好主意，因为它会使您的getQuotes函数更难测试。 / p>

Answer 3

你的函数没有返回任何东西，所以当你将innerhtml的值设置为所需引用的值时，它会第一次执行，但是当函数没有返回任何内容时，未定义它从设置为的函数返回jquery代码中的innerhtml。您可以对代码进行以下更改： -

function getQuotes(){ 
  var quotes = [ 
    "Thousands of candles can be lighted from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared.Buddha",
    "Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.Unknown",
    "To be happy, we must not be too concerned with others.Albert Camus",
    "If you want happiness for an hour — take a nap.If you want happiness for a day — go fishing.If you want happiness for a year — inherit a fortune.If you want happiness for a lifetime — help someone else."
  ]

  var result = quotes[Math.floor(Math.random() * quotes.length)]; 

  return result; 
}

我的函数似乎只返回未定义的值

3 个答案: