Question

我正在关注一个教程，我做了一个按钮来显示一些内容。但是，此按钮不起作用，我不知所措，无法弄清楚是什么原因引起的。

有人可以显示为什么这不起作用吗？

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>

Answer 1

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

JavaScript仅提升声明，而不初始化。如果一个变量在使用后进行声明和初始化，其值为未定义。

上面MDN的块引用说明了为什么可以在调用函数声明后进行定义（从上到下读取代码），但是使用它们后初始化的变量将具有值为undefined。

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>

Answer 2

除了正确的答案之外，请查看下面我重构的代码。希望这会有所帮助。

// Get Elements
const usersList = document.querySelector('#usersList');
const usersBtn = document.querySelector('#usersBtn');

// Bind listener to usersButton
usersBtn.addEventListener('click', () => {
	// XHR Request function
  const xhr = new XMLHttpRequest();
  xhr.open('GET','https://api.github.com/users')
  xhr.send()
  xhr.onload = function() {
    if (xhr.status == 200) {
      // Convert the response to JSON and assign it to data
      const data = JSON.parse(xhr.responseText)
      // Loop throug through data
      for(let i = 0; i <data.length; i++) {
      	// Create LI element and append the user name
      	const listItem = document.createElement('li');
        usersList.appendChild(listItem).innerHTML = data[i].login
      }
    }
  }
})

<h1>USERS</h1>
<button id="usersBtn">Get Users</button>
<ul id="usersList"></ul>

按钮事件侦听器无响应

2 个答案: