按钮事件侦听器无响应
[英]Button Event-listener is unresponsive
问题描述
I'm following a tutorial and I made a button to show some content. 
我正在关注一个教程，并且做了一个按钮来显示一些内容。 However this button doesn't work and I'm at my wits end unable to figure out what could be causing this. 但是，此按钮不起作用，我不知所措，无法弄清楚是什么原因引起的。
Can someone show why this doesn't work? 有人可以显示为什么这行不通吗？
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>
2 个解决方案
解决方案1
1 已采纳 2019-11-26 17:45:16
Order of your variable declarations matters in this scenario due to hoisting - move the loadUsers definition above the call. 在这种情况下，由于吊装 ，变量声明的顺序很重要-将loadUsers定义移到调用上方。
JavaScript only hoists declarations, not initializations.
The block-quote above from MDN explains why function declarations can be defined after they are called (reading code from top-to-bottom), but variables that are initialized after they are used would have a value of undefined . 块引号以上从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>
Or you could keep the function at the bottom but use a function declaration which will be hoisted: 或者，您可以将函数保留在底部，但是使用将被悬挂的函数声明：
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>
解决方案2
1 2019-11-26 18:30:44
In addition to the correct answer have a look at your code that I have refactored below. 除了正确的答案之外，请查看下面重构的您的代码。 Hope this helps. 希望这可以帮助。
// 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.