gpt4 book ai didi

javascript - 单击按钮时如何运行此功能?

转载 作者:行者123 更新时间:2023-12-01 12:04:30 25 4
gpt4 key购买 nike

我做了一个函数,当你按下一个按钮时,它会显示一个随机的报价,问题是这个函数在页面加载时运行。所有代码都按预期工作,但我找不到它立即运行的原因。我认为问题是我在 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>

最佳答案

所以这里有 2 个问题。一个是下面的代码在加载时正确运行:

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

然后点击按钮,你可以绑定(bind) renderQuote:

button.addEventListener('click', renderQuote);

关于javascript - 单击按钮时如何运行此功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59102851/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com