你好，基本上我在做这个教程，我发现我的代码不工作。请提出解决方案，将不胜感激答案

【问题标题】：Hello, so basically I was doing this tutorial and I found that my code wasn't working. Please suggest a solution will greatly appreciate it你好，基本上我在做这个教程，我发现我的代码不工作。请提出解决方案，将不胜感激
【发布时间】：2022-11-19 15:59:02
【问题描述】：

<!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 class="input-btn">SAVE INPUT</button>
    <ul id="ul-el"></ul>
    <script src="ChromeEx.js" defer></script>
</body>
</html>

这是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)
    console.log(myLeads)
})

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

这是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: 0ch;
    border-radius: 10px;
}

所以代码对教程中的人有用。然后我从他的 git repos 中检查了我的代码，但没有发现任何错误。这是一个非常简单的网站，它只是将您在字段中输入的值保存为列表项。它显示错误。 Image with the error message

【问题讨论】：

标签： javascript html

【解决方案1】：

由于您使用const inputBtn = document.getElementById("input-btn")获取按钮，但它没有id，您需要为按钮添加一个id

所以改变

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

至

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

【讨论】：