Javascript 我通过表单发送的数据不显示（localStorage）_Javascript_Json_Local Storage

Javascript 我通过表单发送的数据不显示（localStorage）

javascript json

Javascript 我通过表单发送的数据不显示（localStorage）,javascript,json,local-storage,Javascript,Json,Local Storage,我正在尝试制作一个电话簿，当我点击它时，它会打开一个表单，现在我想显示我的姓名和电话号码现在，当我填写这两个字段并单击send时，它不会显示在网页上这是我的html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

我正在尝试制作一个电话簿，当我点击它时，它会打开一个表单，现在我想显示我的姓名和电话号码现在，当我填写这两个字段并单击send时，它不会显示在网页上

这是我的html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PhoneBook</title>
    <link rel="stylesheet" href="Css/Whole.css">
    <script defer src="JavaScript/PU.js"></script>
</head>

<body>
    <h1>PhoneBook</h1>


    <div class="childContainer">


        <div class="buttonsContainer">
            <div>
                <input type="search" placeholder="search" class="searchBar"></div>
            <div class="buttonsRightSide"> <button value="submit" id="addBtn" class="addBtn">+</button>
                <button value="submit" id="removeBtn" class="removeBtn">-</button>
                <button value="submit" id="saveBtn" class="saveBtn">*</button></div>
        </div>



        <div class="formContainer">
            <form class="addForm" id="addForm">

                <h2>Create Contact</h2>
                <label for="name">First name*:</label>
                <input id="name" type="text" pattern="[A-Z][a-zA-Z]{3,7}" required><br>
                <label for="phoneNumber">Phone number*:</label>
                <input id="phone" type="number" pattern="[0][5][0-8][ -]?\d{7}" required><br>
                <label for="Adress">Address:</label>
                <input type="text" id="Address"><br>
                <label for="Email">Email:</label>
                <input type="email" id="Email"><br>
                <label for="Description">Description:</label>
                <textarea type="text" id="Description"></textarea><br>
                <div class="sendCancelButtons">
                    <button type="submit" class="submitButton" id="submitButton">Send</button> <button value="submit"
                        class="cancelOverlay">Cancel</button></div>
            </form>
        </div>


        <div class="outPutContainer">


        </div>


    </div>

</body>

</html>


通信录
通信录
+
-
*
建立联系
姓名*：


电话号码*：


地址:


电邮：


说明：


发送取消

这是我的javascript

    "use strict";

function showOverlay(showButton, showContainer) { // this whole funciton opens up the overlay
    const addButton = document.querySelector("." + showButton);
    addButton.addEventListener("click", function addSomthing() {
        document.querySelector("." + showContainer).style.display = 'block';
    });
}

showOverlay("addBtn", "formContainer");

function cancelOverlay(cancelButton, showContainer) { //this dynamic funciton helps with closing overlays after we are done with the event

    const removeOverlay = document.querySelector("." + cancelButton);
    removeOverlay.addEventListener("click", function removeSomthing() {
        document.querySelector("." + showContainer).style.display = 'none';
    });

}

cancelOverlay("cancelOverlay", "formContainer");

function inputAndOutput() {
    cancelOverlay("submitButton", "formContainer"); //this function helps me close the form window after i click on send
    const form = document.getElementById("addForm");

    form.addEventListener("submit", (e) => { //this is a submit event when the send button is pressed it makes an object and with the help of JSON it puts it into an array 
            let formOutput = {

                name: document.getElementById("name").value,
                phoneNumber: document.getElementById("phone").value
            } //end of form
            localStorage.setItem("formOutput", JSON.stringify(formOutput)); //array of obj
            console.log(localStorage.getItem('formOutput')); //testing
            displayOutput();
            e.preventDefault(); //prevent the page to reload


        } //end of Event
        , );
}

inputAndOutput();

function displayOutput() {
    if (localStorage.getItem('formOutput')) {
        let {
            name,
            phoneNumber
        } = JSON.parse(localStorage.getItem('formOutput'));
        const output = document.getElementById("outPutContainer");
        output.innerHTML = `
<ul>
<li>${name} </li>
<li>${phoneNumber} </li>
</ul>


`
    }
}

“严格使用”；
函数showOverlay（showButton，showContainer）{//整个函数打开了覆盖
const addButton=document.querySelector（“.”+showButton）；
addButton.addEventListener（“单击”，函数addSomthing（）{
document.querySelector（“.”+showContainer）.style.display='block'；
});
}
showOverlay（“addBtn”、“formContainer”）；
函数cancelOverlay（cancelButton，showContainer）{//此动态函数有助于在完成事件后关闭覆盖
const removeOverlay=document.querySelector（“.”+取消按钮）；
addEventListener（“单击”，函数removeSomthing（））{
document.querySelector（“.”+showContainer）.style.display='none'；
});
}
cancelOverlay（“cancelOverlay”、“formContainer”）；
函数inputadoutput（）{
cancelOverlay（“submitButton”、“formContainer”）；//此函数帮助我在单击“发送”后关闭表单窗口
const form=document.getElementById（“addForm”）；
addEventListener（“submit”，（e）=>{//这是一个提交事件，当按下send按钮时，它生成一个对象，并在JSON的帮助下将其放入数组中
设formOutput={
名称：document.getElementById（“名称”）.value，
电话号码：document.getElementById（“电话”）.value
}//表单结束
localStorage.setItem（“formOutput”，JSON.stringify（formOutput））；//obj的数组
console.log（localStorage.getItem（'formOutput'））；//测试
显示输出（）；
e、 preventDefault（）；//防止重新加载页面
}//事件结束
, );
}
输入输出（）；
函数displayOutput（）{
if（localStorage.getItem（'formOutput'））{
让{
名称
电话号码
}=JSON.parse（localStorage.getItem（'formOutput'））；
const output=document.getElementById（“outPutContainer”）；
output.innerHTML=`

${name}
${phoneNumber}

`
}
}

欢迎提供任何提示和建议，并提前感谢您的JS代码抛出错误

未捕获类型错误：输出为null

变量输出在此处定义：

const output=document.getElementById（“outPutContainer”）
但是，要通过id获取的容器只有一个类：

将class=“outPutContainer”
更改为id=“outPutContainer”
（注意：我使用浏览器开发工具的Console选项卡找到了此解决方案。在Firefox或Chrome中按CTL+SHIFT+C，然后按照错误/警告进行操作。这通常是调试脚本的最快方法。）
哈哈哈，我也遇到了这个错误，但我没有意识到问题出在div上哈哈，我认为这是我的js代码，我可能应该停止过度思考，谢谢你帮了我很多，我很高兴它帮了我：）我确认，通常最好从字面上理解每个错误，并寻找最简单的解决方案（如“不要过度思考”）。祝你密码愉快！