堆棧內存溢出
  簡體   English   中英

未捕獲（承諾）TypeError：無法設置 null 的屬性“innerHTML” - 我可以在 console.log() 中看到值

[英]Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null - I can see value in console.log()

 原文  2020-10-29 22:18:24  9   2    javascript/ html

問題描述

該項目的目標是開發一個 Web 應用程序，可用於從https://api.github.com/users獲取用戶並列出他們的詳細信息和 repo 信息。 我的add_user_repos()函數中的forEach()有問題。 該功能適用​​於第一次點擊，但不適用於第二次點擊。 下面是我的網絡應用程序代碼。 我收到一個錯誤：

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null'

錯誤可以位於粘貼的末尾，評論旁邊<== ERROR HERE

我使用過console.log(repo.name)並打印出來。

對問題或我的代碼的任何反饋將不勝感激，提前致謝。

<!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'

該問題與repo_name變量有關，而不是repo.name 。

document.getElementById("name" + counter); 返回空值

您應該確保"name" + counter存在於您的 DOM 中。

解決方案2
 0 已采納  2020-10-29 23:11:56

而不是將節點元素設置為具有“行”+ 計數器的 id

repo_name.setAttribute("id", "row" + counter);

將其設置為具有“名稱”+ 計數器的 ID

repo_name.setAttribute("id", "name" + counter);

因此，在接下來的搜索中，您將再次能夠在 DOM 中找到該元素。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 未捕獲（承諾）TypeError：無法將屬性&#39;innerHTML&#39;設置為null 未捕獲的TypeError：無法讀取null的屬性&#39;classList&#39; 但是當我在console.log時指向元素 未捕獲的類型錯誤：無法設置未定義的屬性 - 但 console.log 顯示值 未捕獲的TypeError：無法將屬性&#39;innerHTML&#39;設置為null 未捕獲的Typeerror：無法將屬性innerHTML設置為null 未捕獲的TypeError：無法將屬性&#39;innerHTML&#39;設置為null 未捕獲的TypeError：無法將屬性&#39;innerHTML&#39;設置為null 未捕獲的TypeError：無法設置null的屬性&#39;innerHTML&#39; 未捕獲（承諾）類型錯誤：無法讀取 null 的屬性“innerHTML”？ 未捕獲（承諾中）類型錯誤：無法設置 null 的屬性（設置“innerHTML”）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM