单击按钮时如何运行此功能？
[英]How do I get this function to run when a button is clicked?
问题描述
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);我认为问题是我在函数本身之外调用函数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: 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: 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>
8 个解决方案
解决方案1
3 已采纳 2019-11-29 10:26:23
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:然后单击按钮，您可以绑定 renderQuote：
button.addEventListener('click', renderQuote);
解决方案2
1 2019-11-29 10:20:51
You also need to pass the quotesArray as a parameter to the function您还需要将quotesArray作为参数传递给函数
So replace所以更换
button.addEventListener('click', generateQuote);
with和
button.addEventListener('click', () => generateQuote(quotesArray));
解决方案3
0 2019-11-29 10:22:09
create a function and insert everything.创建一个函数并插入所有内容。 and create button with onclick option.并使用 onclick 选项创建按钮。
<input type="button" onclick="generateQuote()>
解决方案4
0 2019-11-29 10:23:01
将您的调用包裹在功能块周围并传递适当的参数
button.addEventListener('click', function (){generateQuote(quotesArray)});
解决方案5
0 2019-11-29 10:25:07
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;
});
解决方案6
0 2019-11-29 10:30:37
You can just remove the line button.addEventListener('click', generateQuote);您可以删除该行button.addEventListener('click', generateQuote);
And in your HTML code add the onClick attribute as shown below并在您的 HTML 代码中添加 onClick 属性，如下所示
<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.由于您使用button您不需要在其上添加侦听器，只有在使用<input type="button"时才必须添加侦听器。
解决方案7
0 2019-11-29 10:31:35
- Try to use let instead of var .尝试使用let 而不是 var 。
- I don't get why you're running a for loop in the function, it seems unnecessary.我不明白你为什么在函数中运行 for 循环，这似乎没有必要。
- I shortened the code a bit.我稍微缩短了代码。
- You don't need an EventListener with a button, only when using an input of type button.只有在使用按钮类型的输入时，才需要带按钮的 EventListener。 Add this to your button's properties instead:
onclick="generateQuote()"改为将其添加到按钮的属性中： 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;
}
解决方案8
0 2019-11-30 04:30:38
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:把它放在 HTML 文档中 head 标签的顶部：
<script src="https://randojs.com/1.0.0.js"></script>
And then you can replace your entire generateQuote(array) function with this:然后你可以用这个替换你的整个 generateQuote(array) 函数：
function generateQuote(array) {
return rando(array).value;
}
I hope this makes things simple for you.我希望这让你的事情变得简单。 Cheers.干杯。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.