Button Event-listener is unresponsive
Question
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 answers
solution1
1 ACCPTED 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.
JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined.
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 .
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>
solution2
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.