个人中心
gpt4 book ai didi

javascript - 按钮事件监听器无响应

转载 作者：行者123 更新时间：2023-12-01 00:25:24 29 4
gpt4 key购买 nike

我正在遵循教程，并制作了一个按钮来显示一些内容。然而这个按钮不起作用，我束手无策，无法弄清楚是什么原因造成的。

有人可以说明为什么这不起作用吗？

const users = document.querySelector('#user');
const getUsers = document.getElementById('getUsers');
getUsers.addEventListener('click', loadUsers);
var loadUsers = () => {
  console.log('hello button clicked')
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/users', true);
  xhr.onload = () => {
    if (this.status == 200) {
      let gusers = this.responseText
      console.log(gusers);
    }
  }
  xhr.send()
}
console.log(getUsers)
<h1>USER</h1>
<button id="getUsers">Get Users</button>
<div id="users"></div>

最佳答案

在这种情况下，变量声明的顺序很重要，因为 hoisting - 将 loadUsers 定义移至调用上方。

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined.

上面来自 MDN 的 block 引用解释了为什么函数声明可以在调用之后定义(从上到下读取代码)，但在使用后初始化的变量会具有值为未定义。 

const users = document.querySelector('#user');
const getUsers = document.getElementById('getUsers');
const loadUsers = () => {
  console.log('Load users..');
}

getUsers.addEventListener('click', loadUsers);
<head>
  <meta charset="UTF-8">
  <title>Testing AJAX</title>
</head>

<body>
  <h1>USER</h1>
  <button id="getUsers">Get Users</button>
  <div id="users"></div>
</body>

或者您可以将函数保留在底部，但使用将被提升的函数声明:

const users = document.querySelector('#user');
const getUsers = document.getElementById('getUsers');

getUsers.addEventListener('click', loadUsers);

function loadUsers() {
  console.log('Load users..');
}
<head>
  <meta charset="UTF-8">
  <title>Testing AJAX</title>
</head>

<body>
  <h1>USER</h1>
  <button id="getUsers">Get Users</button>
  <div id="users"></div>
</body>

关于javascript - 按钮事件监听器无响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59056601/

29 4 0
文章推荐： jQuery:调用后更改插件选项
文章推荐： 具有拖放功能的 jQuery 轮播
文章推荐： php - 这个代码是 : $_SESSION ['username' ] = $username; enough to store the username in the session?
文章推荐： azure-devops - 忽略 'Delete Files Task' 内的文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com