How do I get this function to run when a button is clicked?

Question

I made a function that will show you a random quote whenever you press a button, the problem is that the function runs when the page is loaded. All the code works as it should but I can't find the reason why it runs immediately. I think the problem is that I call the function outside the function itself at var result = generateQuote(quotesArray);, but when I place it in the function itself it breaks.

I hope someone can help me find the problem, here is the code:

JavaScript:

const quotes = new Object();

const quotesArray = [{
    quote: "“Be yourself, everyone else is already taken.”",
    author: "- Oscar Wilde",
} , {
    quote: "“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”",
    author: "― Albert Einstein",
} , {
    quote: "“The important thing is not to stop questioning. Curiosity has its own reason for existing.”",
    author: "― Albert Einstein"
} , {
    quote: "“Expect everything, I always say, and the unexpected never happens.”",
    author: "― Norton Juster"
} , {
    quote: "“What lies behind you and what lies in front of you, pales in comparison to what lies inside of you.”",
    author: "― Ralph Waldo Emerson"
} , {
    quote: "“We are part of this universe; we are in this universe, but perhaps more important than both of those facts, is that the universe is in us.”",
    author: "―Neil deGrasse Tyson"
}]

    const button = document.querySelector('.generateQuote');
    const author = document.querySelector('#quoteAuthor');
    const quoteText = document.querySelector('#quote');

button.addEventListener('click', generateQuote);

function generateQuote(array) {
    var quoteIndex = Math.floor(Math.random() * quotesArray.length); 
    for (var i = 0; i < array.length; i++) { 
            var randomQuote = array[quoteIndex]; 
          } 
          return randomQuote; 
        }
        var result = generateQuote(quotesArray); 

        quoteText.innerHTML = result.quote;
        author.innerHTML = result.author;

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quote Generator</title>
    <link rel="stylesheet" href="main.css">

</head>
<body>
    <div class="border">
    <div class="quoteContainer">
        <h2 class="title">Quote Generator</h2>
        <button class="generateQuote">Generate a inspiring quote</button>
        <blockquote id="quote"><h2>quote</h2></blockquote>
        <h3 id="quoteAuthor">Author of the quote</h3>
    </div></div>
    <script src="script.js"></script>
</body>
</html>

Wojciech Dynus · Accepted Answer · 2019-11-29T10:33:24.373

3

So you have 2 problems here. One is the below code is being run right on load:

var result = generateQuote(quotesArray); 

    quoteText.innerHTML = result.quote;
    author.innerHTML = result.author;

This is causing the render of the quote on page load. You should instead wrap it in a function to prevent that. For instance you can write something like this:

function generateQuote(array) {
    var quoteIndex = Math.floor(Math.random() * quotesArray.length);
    var randomQuote;

    for (var i = 0; i < array.length; i++) { 
        randomQuote = array[quoteIndex]; 
    }

    return randomQuote;
}

function renderQuote() {
    var result = generateQuote(quotesArray); 

    quoteText.innerHTML = result.quote;
    author.innerHTML = result.author; 
}

Then on button click, you can bind the renderQuote:

button.addEventListener('click', renderQuote);

edited Nov 29 '19 at 10:33

answered Nov 29 '19 at 10:26

Wojciech Dynus

911
5
11

Thank for the fast reply, i tried the code but it says the the code after i close the ```for``` statement is unreachable. – Basickz Nov 29 '19 at 10:31
1

Yes, sorry about that! Just changed the code - this should work fine now – Wojciech Dynus Nov 29 '19 at 10:33
1

Yes it works perfectly fine! thank you so much. i couldnt find out why it didnt worked but now i understand. :) – Basickz Nov 29 '19 at 10:36

Liad Yogev · Answer 2 · 2019-11-29T10:25:58.240

1

You also need to pass the quotesArray as a parameter to the function

So replace

button.addEventListener('click', generateQuote);

with

button.addEventListener('click', () => generateQuote(quotesArray));

edited Nov 29 '19 at 10:25

answered Nov 29 '19 at 10:20

Liad Yogev

854
7
16

score 0 · Answer 3 · answered Nov 29 '19 at 10:22

0

create a function and insert everything. and create button with onclick option.

<input type="button"  onclick="generateQuote()>

answered Nov 29 '19 at 10:22

vishal

462
1
5
12

Giddy Naya · Answer 4 · 2019-11-29T10:26:48.397

0

Wrap your call around a function block and pass appropriate parameters

  button.addEventListener('click', function (){generateQuote(quotesArray)});

edited Nov 29 '19 at 10:26

answered Nov 29 '19 at 10:23

Giddy Naya

4,237
2
17
30

score 0 · Answer 5 · answered Nov 29 '19 at 10:25

On the second parameter you want to call a fonction reference, not the function itself. So you can do the following:

 button.addEventListener('click', function(quotesArray){
   var quoteIndex = Math.floor(Math.random() * quotesArray.length); 
   for (var i = 0; i < array.length; i++) { 
        var randomQuote = array[quoteIndex]; 
      } 
      return randomQuote; 
    }
    var result = generateQuote(quotesArray); 

    quoteText.innerHTML = result.quote;
    author.innerHTML = result.author;
});

score 0 · Answer 6 · answered Nov 29 '19 at 10:30

You can just remove the line button.addEventListener('click', generateQuote);

And in your HTML code add the onClick attribute as shown below

<button class="generateQuote"  onclick="generateQuote()">Generate a inspiring quote</button>

Since you use button you dont need to add a listener on top of that, only if you used <input type="button" you had to add the listener.

Tom de Visser · Answer 7 · 2019-11-29T10:35:28.467

0

Try to use let instead of var.
I don't get why you're running a for loop in the function, it seems unnecessary.
I shortened the code a bit.
You don't need an EventListener with a button, only when using an input of type button. Add this to your button's properties instead: onclick="generateQuote()"

Let me know if it works!

function generateQuote(array) {
    let quoteIndex = Math.floor(Math.random() * quotesArray.length); 
    let randomQuote = array[quoteIndex]; 

    quoteText.innerHTML = randomQuote.quote;
    author.innerHTML = randomQuote.author; 
}

edited Nov 29 '19 at 10:35

answered Nov 29 '19 at 10:31

Tom de Visser

55
10

That's not the right syntax to use `addEventListener` , you must pass a function and not a value. – Liad Yogev Nov 29 '19 at 10:35
You're right, I thought both were possible. I updated the answer, thanks. :) – Tom de Visser Nov 29 '19 at 10:36

score 0 · Answer 8 · answered Nov 30 '19 at 04:30

I see that you already have your question answered. If you don't mind, I'd like to suggest a way to clean up your code.

Put this at the top inside of the head tag in your HTML document:

<script src="https://randojs.com/1.0.0.js"></script>

And then you can replace your entire generateQuote(array) function with this:

function generateQuote(array) {
    return rando(array).value;
}

I hope this makes things simple for you. Cheers.

How do I get this function to run when a button is clicked?

8 Answers8