跟随教程做简易存值网站遇报错，代码与Git仓库一致仍无法解决

核心错误1：按钮元素获取失败 #

HTML中按钮使用的是class="input-btn"，但JS里用getElementById("input-btn")获取，两者不匹配，导致inputBtn为null，无法添加点击事件监听，这是报错的直接原因。

修改HTML按钮代码：

<button id="input-btn">SAVE INPUT</button>

核心错误2：列表渲染时机错误 #

当前for循环在页面加载时执行，此时myLeads是空数组，不会生成任何列表项。需要把列表渲染逻辑放到按钮点击事件内部，每次添加新内容后重新渲染列表，同时建议先清空列表内容避免重复渲染。

修改JS代码：

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", function(){
    myLeads.push(inputEl.value)
    inputEl.value = "" // 清空输入框，提升体验
    renderLeads()
})

function renderLeads() {
    let listItems = ""
    for (let i = 0; i < myLeads.length; i++) {
        listItems += "<li>" + myLeads[i] + "</li>"
    }
    ulEl.innerHTML = listItems
}

完整修正代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="ChromeEx.css">
</head>
<body>
   <input type="text" id="input-el">
    <button id="input-btn">SAVE INPUT</button>
    <ul id="ul-el"></ul>
    <script src="ChromeEx.js" defer></script>
</body>
</html>

CSS（仅规范一处写法，不影响功能） #

body{
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
input{
    height: 50px;
    width: 100%;
    border: 1px solid green;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
button{
    background-color: green;
    color: antiquewhite;
    height: 50px;
    width: 150px;
    border: 0; /* 替换原写法border:0ch，更规范 */
    border-radius: 10px;
}

JavaScript #

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", function(){
    myLeads.push(inputEl.value)
    inputEl.value = ""
    renderLeads()
})

// 封装渲染函数，代码更模块化
function renderLeads() {
    let listContent = ""
    // 用for...of循环更简洁
    for (let lead of myLeads) {
        listContent += `<li>${lead}</li>`
    }
    ulEl.innerHTML = listContent
}

内容的提问来源于stack exchange，提问作者Spa4k