按鈕事件偵聽器無響應

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