fetch()是在激活事件侦听器按钮之前触发的- Chuck
fetch()是在激活事件侦听器按钮之前触发的- Chuck
提问于 2019-12-21 16:29:00
太奇怪了，我错过了什么。
我试图获得这个API发送给我随机查克诺里斯引号的按钮点击。
然而，只要我刷新页面，我就会得到一个新的引用。我只想它提供给我一个新的报价，一旦我提交/点击按钮。
请参阅下文的HMTL和JS：
<body>
<div>
<button id="xxx"> GET A CHUCK QUOTE</button>
<h1 id="chuck-quote"></h1>
</div>
<script>
const chuck_button = document.getElementById('xxx');
chuck_button.addEventListener('click', function () {
fetch('https://api.chucknorris.io/jokes/random')
.then(response => {
return response.json();
}).then( data => {
const chuck_quote = document.getElementById('chuck-quote');
chuck_quote.innerHTML = JSON.stringify(data.value);
})
}());
</script>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-21 16:32:05
删除行()中的}());。否则，直接调用该函数。
Stack Overflow用户
发布于 2019-12-21 16:32:20
在设置addEventListener函数时，您正在调用它，我删除了()，它运行良好。
const chuck_button = document.getElementById('xxx');
chuck_button.addEventListener('click', function() {
fetch('https://api.chucknorris.io/jokes/random')
.then(response => {
return response.json();
}).then(data => {
const chuck_quote = document.getElementById('chuck-quote');
chuck_quote.innerHTML = JSON.stringify(data.value);
})
});<div>
<button id="xxx"> GET A CHUCK QUOTE</button>
<h1 id="chuck-quote"></h1>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59437929
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号