I have made various attempts, but can someone please point out the issue with this array?

Question

I have made various attempts, but can someone please point out the issue with this array?

I've been working on creating a random quote generator that generates a new quote whenever a button is clicked. However, I seem to have everything set up correctly but for some reason, when the button is clicked nothing happens.

Below is the code I have implemented:

HTML code

<div class="quote-box">
   <p id = "quote-generator"> This is where the generated quote will be displayed </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];`
}

javascript html jquery css arrays

Answer 1

Answer №1

Common Mistakes in Coding

A common mistake is using
```
onclick="function newQuote()"
```
instead of onclick="newQuote()" for function calls when clicking.
Another error to watch out for is mistyping the length property when generating random numbers from a list. The correct way is
```
const randomNumber = Math.floor(Math.random() * list.length);
```
, not
```
const randomNumber = Math.floor(Math.random() * list.lenght);
```
Ensuring consistency between the ID specified in the HTML (quote-generator) and the one used in the script (quotes-generator) is crucial for proper functionality.
To refresh the random number each time the button is clicked, consider moving the random number generation logic inside the function rather than outside. This ensures that a new value is generated with each 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() {
    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>

For a more concise solution, you can simplify your code like this:

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>

Answer 2

Common Mistakes in Coding

A common mistake is using
```
onclick="function newQuote()"
```
instead of onclick="newQuote()" for function calls when clicking.
Another error to watch out for is mistyping the length property when generating random numbers from a list. The correct way is
```
const randomNumber = Math.floor(Math.random() * list.length);
```
, not
```
const randomNumber = Math.floor(Math.random() * list.lenght);
```
Ensuring consistency between the ID specified in the HTML (quote-generator) and the one used in the script (quotes-generator) is crucial for proper functionality.
To refresh the random number each time the button is clicked, consider moving the random number generation logic inside the function rather than outside. This ensures that a new value is generated with each 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() {
    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>

For a more concise solution, you can simplify your code like this:

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>

Answer 3

Answer №2

Don't forget to properly escape characters in array values, especially when using single quotes like '.
Remove any extra commas at the end of arrays.
Ensure you are calling functions correctly on button click events.

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>

Answer 4

Don't forget to properly escape characters in array values, especially when using single quotes like '.
Remove any extra commas at the end of arrays.
Ensure you are calling functions correctly on button click events.

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>

Answer 5

Answer №3

let randomNum = Math.floor(Math.random()*list.size);

The correct spelling is `list.length` and not `list.lenght`.

Answer 6

let randomNum = Math.floor(Math.random()*list.size);

The correct spelling is `list.length` and not `list.lenght`.

Answer 7

Answer №4

To eliminate redundancy, consider randomizing the array once and then displaying it to the user in a rotating manner:

/* Shuffle the array 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>

Answer 8

To eliminate redundancy, consider randomizing the array once and then displaying it to the user in a rotating manner:

/* Shuffle the array 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>

I have made various attempts, but can someone please point out the issue with this array?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Exploring the art of extracting a string based on a specific pattern with JavaScript

Is it possible to pass an Array into a callback function in element-ui's el-autocomplete component?

How Angular services transmit information to components

When clicking, expand the li element to 100% width and move the other siblings aside

designing a presentation with customizable durations for each slide

Ways to implement the useEffect hook within a table component for retrieving data from the backend

I'm puzzled by the addition of attributes to the closing </span> tag in the HTMLElement.innerHTML. It seems unnecessary, and I

What is the most effective method for dividing a string in C programming?

Issue with Angular2 where stylesheets are not loading properly

Combining multiple storageStates in a playwright context for efficient loading

Issue encountered while fetching data using jQuery AJAX request through PHP proxy

Opting for frontend technologies such as React or Angular to update a Silverlight application containing over 1000 unique forms and views

Using Vue.js watchers can sometimes cause an endless loop

Creating unique random mesh placement in Three.js without overlapping

Clicking the identical button on multiple overlapping elements using Selenium and Node.js

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

A dynamic star rating plugin in jQuery that allows for partial star ratings

The positioning of Div elements constantly shifts unpredictably

What is the best way to display two items side by side from a list of items in HTML?