未捕获（承诺）TypeError：无法设置 null 的属性“innerHTML” - 我可以在 console.log() 中看到值
[英]Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null - I can see value in console.log()
问题描述
The goal of this project is to develop a web app that can be used to fetch users from https://api.github.com/users and list their details along with repo information.
该项目的目标是开发一个 Web 应用程序，可用于从https://api.github.com/users获取用户并列出他们的详细信息和 repo 信息。 I am having a problem with my forEach() in my add_user_repos() function.我的add_user_repos()函数中的forEach()有问题。 The function works on the first click but not the second.该功能适用于第一次点击，但不适用于第二次点击。 Below is my code for a web app.下面是我的网络应用程序代码。 I am getting a error :我收到一个错误：
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null'
Error can be located at the end of the paste, next to comment <== ERROR HERE错误可以位于粘贴的末尾，评论旁边<== ERROR HERE
I have used console.log(repo.name) and it prints.我使用过console.log(repo.name)并打印出来。
Any feedback on the problem or my code in general will be greatly appreciated, thanks in advance.对问题或我的代码的任何反馈将不胜感激，提前致谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="problem_3.css">
</head>
<body>
<div class="center">
<div class="section">
<form name="search_bar">
<label for="search"></label>
<input id="search" type="text" name="search" placeholder="Username">
<button type="button" onclick="search_user()">Search</button>
</form>
</div>
</div>
<div>
<div class="container">
<h1>User Profile</h1>
<div class="wrapper">
<div id="picture">
<!-- image -->
</div>
<div id="user_info">
<table>
<tr>
<th>Name: </th>
<td id="name"></td>
</tr>
<tr>
<th>Username: </th>
<td id="username"></td>
</tr>
<tr>
<th>Email: </th>
<td id="email"></td>
</tr>
<tr>
<th>Locations: </th>
<td id="location"></td>
</tr>
<tr>
<th>Number of gists: </th>
<td id="gists"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="container">
<h1>User Repos</h1>
<div class="wrapper">
<div id="user_repos">
<div class="user_repos">
<table id="repo">
<tr>
<th>Name: </th>
<td id="name0"></td>
</tr>
<tr>
<th>Description: </th>
<td id="desc0"></td>
</tr>
<tr>
<th>Name: </th>
<td id="name1"></td>
</tr>
<tr class="row">
<th>Description: </th>
<td id="desc1"></td>
</tr>
<tr>
<th>Name: </th>
<td id="name2"></td>
</tr>
<tr class="row">
<th>Description: </th>
<td id="desc2"></td>
</tr>
<tr>
<th>Name: </th>
<td id="name3"></td>
</tr>
<tr class="row">
<th>Description: </th>
<td id="desc3"></td>
</tr>
<tr>
<th>Name: </th>
<td id="name4"></td>
</tr>
<tr class="row">
<th>Description: </th>
<td id="desc4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
function search_user(){
const url = 'https://api.github.com/users/';
const name = document.forms["search_bar"]["search"].value;
get_user_details(name);
async function get_user_details(input){
const headers = {
//token
}
const resp = await fetch(url + input, {
"method": "GET",
"headers":headers
});
const data = await resp.json();
addData(data);
}
function addData(data) {
const user_name = document.getElementById("name");
const user_username = document.getElementById("username");
const user_email = document.getElementById("email");
const user_location = document.getElementById("location");
const user_picture = document.getElementById("picture");
const user_gists = document.getElementById("gists");
const pic = new Image();
pic.src = data.avatar_url;
user_picture.appendChild(pic);
user_name.innerHTML = data.name;
console.log(data.name);
user_username.innerHTML = data.login;
user_email.innerHTML = data.email;
user_location.innerHTML = data.location;
user_gists.innerHTML = data.public_gists;
get_user_repos(data.login);
async function get_user_repos(username) {
const resp = await fetch(url + username + "/repos");
const repo_data = await resp.json();
add_user_repos(repo_data);
}
function add_user_repos(repos) {
// counter used to find if more than 5 repos are added
let counter = 0;
const repo_div = document.getElementById("user_repos");
repos.forEach((repo) => {
let repo_name = document.getElementById("name" + counter);
let repo_desc = document.getElementById("desc" + counter);
// if more than 5 repo names/desc are added
if (counter > 4) {
const create_repo_name = document.createElement("p");
const create_desc = document.createElement("p");
create_repo_name.innerHTML = "<b>Name: </b>" + repo.name;
create_desc.innerHTML = "<b>Description: </b>" + repo.description;
create_desc.setAttribute("class", "row");
repo_div.appendChild(create_repo_name);
repo_div.appendChild(create_desc);
// add scrolling
document.getElementById("user_repos").style.overflow = "auto";
} else {
repo_name.innerHTML = repo.name; // <== ERROR HERE
repo_desc.innerHTML = repo.description;
repo_name.setAttribute("id", "row" + counter);
repo_desc.setAttribute("id", "desc" + counter);
counter++;
}
})
}
}
}
</script>
</html>
2 个解决方案
解决方案1
0 2020-10-29 22:40:47
TypeError: Cannot set property 'innerHTML' of null'
The issue is related to repo_name variable, not repo.name .该问题与repo_name变量有关，而不是repo.name 。
document.getElementById("name" + counter); returns null返回空值
You should ensure "name" + counter exists in your DOM.您应该确保"name" + counter存在于您的 DOM 中。
解决方案2
0 已采纳 2020-10-29 23:11:56
Instead of setting the node element to have an id of "row"+ counter而不是将节点元素设置为具有“行”+ 计数器的 id
repo_name.setAttribute("id", "row" + counter);
set it to have an id of "name" + counter将其设置为具有“名称”+ 计数器的 ID
repo_name.setAttribute("id", "name" + counter);
Thereby in the next searches you will again be able to find that element in the DOM.因此，在接下来的搜索中，您将再次能够在 DOM 中找到该元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.