Я пытаюсь создать телефонную книгу с кнопкой добавления, когда я нажимаю на нее, она открывает форму, и сейчас я хочу отображать свое имя и номер телефона, когда я заполняю эти 2 поля и нажимаю на отправку, он не отображает его в страница в Интернете

Это мой 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

-1
legendary child 12 Фев 2021 в 10:15

1 ответ

Лучший ответ

Ваш код JS выдает ошибку Uncaught TypeError: output is null.

Вывод переменной определяется здесь:

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

Однако контейнер, который вы хотите получить по идентификатору, имеет только класс:

<div class="outPutContainer">

Измените class="outPutContainer" на id="outPutContainer".

( Примечание : я нашел это решение, используя вкладку «Консоль» инструментов разработчика моего браузера. Нажмите CTL + SHIFT + C, например, в Firefox или Chrome и следите за сообщениями об ошибках / предупреждениях. Обычно это самый быстрый способ. для отладки ваших скриптов.)

1
randmin 12 Фев 2021 в 07:39