<!DOCTYPE html>
<html>
<head>
<title>Quote Gen</title>

<script src="jquery-3.1.1.min.js"></script>
<script>

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.','Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.','To be happy, we must not be too concerned with others.','Change your thoughts and you change your world.','hello'];
  function newQuote(){
  var RandomNumber = Math.floor(Math.random())*Quotes.length;
  $("#QuoteDisplay").text(Quotes[RandomNumber]);
  }
  </script>
  </head>
  <h5>
  Simple Quote Generator
  </h5>
  <body>
<p id = "QuoteDisplay">

</p>
  <button onclick="newQuote()">New Quote!</button>

</body>  
</html>

Это простой генератор цитат, который я создаю как часть FreeCodeCamp. Цель состоит в том, чтобы генерировать новую цитату всякий раз, когда пользователь нажимает на кнопку «Buttton». Однако, когда я нажимаю на кнопку, текст не отображается. Что не так / отсутствует в моем коде?

0
djokester 8 Янв 2017 в 23:04

3 ответа

Лучший ответ

Вам просто нужно убедиться, что у вас есть ссылка на библиотеку JQuery, ДО того, как будет найден скрипт И затем переместить одну скобку в этой строке:

var RandomNumber = Math.floor(Math.random())*Quotes.length;

Так что это:

var RandomNumber = Math.floor(Math.random()*Quotes.length);

Перемещая закрывающую скобку так, чтобы она получалась ПОСЛЕ Quotes.length, вы гарантируете, что генерируемое случайное число (от 0 до 1) умножается на длину массива ДО округления в меньшую сторону. Если вы этого не сделаете, случайное число всегда будет округлено до 0.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Quote Gen</title>

<script src="jquery-3.1.1.min.js"></script>
<script>

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.','Happiness is the art of never holding in your mind the memory of any unpleasant thing that has passed.','To be happy, we must not be too concerned with others.','Change your thoughts and you change your world.','hello'];
  
  function newQuote(){
    var RandomNumber = Math.floor(Math.random()*Quotes.length);
    $("#QuoteDisplay").text(Quotes[RandomNumber]);
  }
  
  </script>
  </head>
  <h5>
  Simple Quote Generator
  </h5>
  <body>
  <p id = "QuoteDisplay"></p>
  <button onclick="newQuote()">New Quote!</button>

</body>  
</html>
3
Scott Marcus 8 Янв 2017 в 20:14
  • Случайное число всегда 0
  • Кроме того, рекомендуется объявлять переменные Javascript строчными буквами с первой буквы.
  • Придерживайтесь jQuery, если вы используете его, избегайте нажатия на DOM, если вы можете использовать событие jQuery click.

Это рабочий пример с некоторыми исправлениями.

https://jsbin.com/meqetumini/edit?html,js,output

function newQuote(){
    var RandomNumber = Math.floor(Math.random()*Quotes.length);
    $("#QuoteDisplay").text(Quotes[RandomNumber]);
}

$('#new-quote-btn').click(newQuote)
1
Tom Sarduy 8 Янв 2017 в 20:15

Math.floor (Math.random ()) всегда возвращает 0, поэтому все, на что вы его умножите, будет 0

1
Simeon 8 Янв 2017 в 20:14