当按钮被点击时，我该如何让这个函数运行？

Question

当按钮被点击时，我该如何让这个函数运行？

3

我创建了一个函数，当你按下按钮时会显示一条随机引用语，但问题在于该函数在页面加载时就运行了。所有代码都按照预期工作，但我找不到它立即运行的原因。我认为问题在于我在 var result = generateQuote(quotesArray); 外部调用函数本身，但当我将其放置在函数本身内部时，它会出错。

我希望有人能帮我找到问题，以下是代码：

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>

- Basickz

8个回答

1

你需要将quotesArray作为参数传递给该函数。

因此，将其替换为：

button.addEventListener('click', generateQuote);

带有。

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

- Liad Yogev

0

创建一个函数并插入所有内容，然后创建一个带有onclick选项的按钮。

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

- vishal

0

将您的调用包装在一个函数块中，并传递适当的参数。

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

- Giddy Naya

0

在第二个参数中，您想要调用一个函数引用，而不是函数本身。因此，您可以执行以下操作：

 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;
});

- RomainV

0

您可以直接删除该行：button.addEventListener('click', generateQuote);

然后在您的HTML代码中添加如下所示的onClick属性

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

由于你使用的是 button，所以你不需要在其上添加一个监听器，只有当你使用了 <input type="button" 时，才需要添加监听器。

- lampropoi

0

尽量使用let而不是var。
我不明白为什么你在函数中运行for循环，这似乎是不必要的。
我把代码缩短了一点。
对于按钮，您不需要一个EventListener，只有在使用类型为button的输入时才需要。将此添加到按钮的属性中：onclick="generateQuote()"

让我知道它是否有效！

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

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

- Tom de Visser

这不是使用 addEventListener 的正确语法，你必须传递一个函数而不是一个值。 - Liad Yogev

你说得对，我以为两种方式都可以。我已经更新了答案，谢谢。 :) - Tom de Visser

0

我看到你已经得到了答案。如果您不介意，我想建议一种清理代码的方法。

将以下内容放置在HTML文档中head标签内的顶部：

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

然后你可以用这个替换掉整个generateQuote(array)函数：

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

希望这能让你的事情变得简单。干杯。

- Aaron Plocharczyk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wojciech Dynus · Accepted Answer

所以你有两个问题。其一是以下代码在页面加载时就运行了：

var result = generateQuote(quotesArray); 

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

这会导致引用在页面加载时被渲染。相反，您应该将其包装在一个函数中以防止这种情况发生。例如，您可以这样编写:

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

然后在按钮点击时，您可以绑定renderQuote：

button.addEventListener('click', renderQuote);