Created elements not displaying

So basically what I'm trying to do is when I fill out a form. All the information gets displayed in a newly created div after I hit a submit button. The problem I'm having is that when I press the submit button. A div doesn't show up at all. Does anyone know how I can accomplish this?


$(document).ready(function() {

    $('#submit').click(function() {
        //Form Disappears after Submission
        var form = document.getElementById("form");
        var formBackground = document.getElementById("form-background");
        if ( == "block" || == "") {
       = "none";
       = "none";

        //Creates New Div After Submission
        var titleInput = document.getElementById("titleInput").value;
        var descInput = document.getElementById("descInput").value;
        var structure = $('<div class="note"><div class="note-content"><div class="imagecontainer"><img src="./images/jose.jpg"/></div><div class="description"><h3>Title:</h3>' + titleInput + '<p>Description:</p>' + descInput + '</div></div></div>');
        return false;



<!DOCTYPE html>


        <meta charset="UTF-8"> 
        <title>Personal Note Taker</title>
        <!--Button Icons-->
        <link rel="stylesheet" href="">
        <!--Index Styling-->
        <link rel ="stylesheet" href="./css/styling.css"/>


        <div id="header">
            <h1>Personal Note Taker</h1>

        <div id="containter"></div>
        <!--How the Note should look like
        <div class="note">
            <div class="note-content">
                <a href="./quote1.html">
                <div class="imagecontainer">
                    <img src="./images/jose.jpg"/>

                <div class="description">
                    <h3>Quote 1</h3>
                    <p>Every action that you commit, will develop who you are. </p>

        <!--Add Note Button-->
        <div id="addNoteButton">
            <i class="fa fa-plus" aria-hidden="true"></i>

        <!--Form Background-->
        <div id="form-background">

        <!--Form Field-->
        <div id="form">
            <div id="cancel-button-div">
                <button id="cancel-button">X</button>

            <h2 id="form-title">Add a Note</h2>

            <!--Title and Description Questions-->
                <input placeholder="Title" type="text" id="titleInput">
                <textarea placeholder="Description" type="text" id="descInput" rows="5" cols="30">
                <button id="submit">Submit</button>

        <!--Index Javascript-->
        <script src="./js/index_script.js"></script>



Answers 1

Related Articles