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

Question

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

这是我的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>


`
    }
}

欢迎任何提示和建议，并提前致谢<3

Answer 1

您的 JS 代码抛出错误 Uncaught TypeError: output is null。

变量输出在此处定义：

const output = document.getElementById("outPutContainer");

然而，你想通过id获取的容器只有一个class:

<div class="outPutContainer">

将class="outPutContainer"更改为id="outPutContainer"。

(注意：我使用浏览器开发工具的控制台选项卡找到了这个解决方案。在 Firefox 或 Chrome 中按 CTL+SHIFT+C 和遵循 errors/warnings。这通常是调试脚本的最快方法。）

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

the data i send through the form does not display(localStorage)

javascript

json

local-storage