I have tried multiple ways, Can anyone tell me what's wrong with this array?

user_16606033 0
Viewed 111

I am trying to make a random quote generator that generates a quote by the click of a button. I think I have done everything right, but once the button is clicked nothing happens.

Here is the code

HTML code

<div class="quote-box">
   <p id = "quote-generator"> this is where the quote will go </p>
   <button class="btn" onclick="function newQuote()"> Next </button>
</div>

JS code

var list =  [
'/"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. /"',
'/"A problem is a chance for you to do your best./"',
'/"Learn how to be happy with what you have while you pursue all that you want./"',];`

const randomNumber = Math.floor(Math.random()*list.lenght);

function newQuote() {

document.getElementById("quotes-generator").innerHTML = list [randomNumber];`
}
css arrays html jquery javascript
4 Answers

Mistakes in code

  • Function call should be done on click with onclick="newQuote()" and not with onclick="function newQuote()"
  • Typo error in taking the length of list to generate random number. It should be const randomNumber = Math.floor(Math.random() * list.length); and not const randomNumber = Math.floor(Math.random() * list.lenght);
  • Id specified in HTML was quote-generator and in script was quotes-generator. They must be same.
  • Also you can move the random number generation logic to inside of the function to generate new random number each time the user clicks the button. Current random number generation happens only once and the value will not update when the user clicks the button

var list = [
    '/"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. /"', 
    '/"A problem is a chance for you to do your best./"', 
    '/"Learn how to be happy with what you have while you pursue all that you want./"',
];


function newQuote() {
    const randomNumber = Math.floor(Math.random() * list.length);
    document.getElementById("quote-generator").innerHTML = list[randomNumber];
}
<div class="quote-box">
    <p id="quote-generator"> this is where the quote will go </p> <button class="btn" onclick="newQuote()">
        Next </button>

</div>

The minimal representation of your solution will be

const list = [
    '"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "',
    '"A problem is a chance for you to do your best."',
    '"Learn how to be happy with what you have while you pursue all that you want."',
];
newQuote = () => document.getElementById("quote-generator").innerHTML = list[Math.floor(Math.random() * list.length)];
<div class="quote-box">
    <p id="quote-generator">
        this is where the quote will go
    </p>
    <button class="btn" onclick="newQuote()"> Next</button>
</div>

user_60993270

const randomNumber = Math.floor(Math.random()*list.lenght);

It should be list.length and not list.lenght.

user_40574740
  1. In your example no need to escape character in array. If single quote ' inside in your array value you need escape character.
  2. End of array you have extra , .
  3. Wrong way to call function on button click.

var list = ['"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "', '"A problem is a chance for you to do your best."', '"Learn how to be happy with what you have while you pursue all that you want."'];;


function newQuote() {
  let rnd = Math.floor(Math.random() * list.length);
  let rqt = list[rnd];
  document.getElementById("quote-generator").innerHTML = rqt;
}
<div class="quote-box">
  <p id="quote-generator"> this is where the quote will go </p> <button class="btn" onclick="newQuote()"> Next </button>

</div>

user_9651460

If you want to avoid repetitions, it is probably a better idea to shuffle the array once and then present it to the user in a cycling fashion:

/* Randomize array in-place using Durstenfeld shuffle algorithm */
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i],array[j]] = [array[j],array[i]];
}
}
const list = [
    '"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "', 
    '"A problem is a chance for you to do your best."', 
    '"Learn how to be happy with what you have while you pursue all that you want."',
]; 
shuffleArray(list);
list.n=-1;
document.querySelector(".btn").onclick=newQuote;

function newQuote(){
  document.getElementById("quote-generator").innerHTML = list[++list.n%list.length];
}
newQuote();
<div class="quote-box">
  <p id="quote-generator"> this is where the quote will go </p> 
  <button class="btn"> Next </button>
</div>

user_26100610
Related