按钮事件侦听器无响应

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

在这种情况下，由于吊装，变量声明的顺序很重要-将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 个解决方案

解决方案1
1 已采纳 2019-11-26 17:45:16

解决方案2
1 2019-11-26 18:30:44

按钮事件侦听器无响应

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-11-26 17:45:16

解决方案2 1 2019-11-26 18:30:44

解决方案1
1 已采纳 2019-11-26 17:45:16

解决方案2
1 2019-11-26 18:30:44