Question

0

240

Visualizações

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

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

about 4 years ago · Juan Pablo Isaza

3 Respostas

Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

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

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

about 4 years ago · Juan Pablo Isaza Relatório

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-08-31T08:53:36.559Z

In your example no need to escape character in array. If single quote ' inside in your array value you need escape character.
End of array you have extra , .
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>

0

240

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

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT