JavaScript constructor function returns values as undefined

Question

I'm trying to make a script that creates an object on submit from form values but on each submit it returns values as undefined .

This is HTML:

<header>
        <input type="text" class="title">
        <input type="text" class="image">
        <textarea class="text"></textarea>
        <button id="submit">+</button>
    </header>
    <main>
        <div class="dashboard"></div>
    </main>

This is my script:

(function(){
    function Post(title, image, text) {
        this.title = title;
        this.image = image;
        this.text = text;
        this.date = new Date();
    }

    var post = new Post();

    function Dashboard() {
        var main = document.querySelector("main");
        var article = document.createElement("div");
        article.classList.add("post");
        var title = document.createElement("h1");
        var image = document.createElement("div");
        image.classList.add("img");
        var text = document.createElement("p");
        var date = document.createElement("p");
        var postTitle = post.title;
        var postImage = post.image;
        var postText = post.text;
        var postDate = post.date;
        title.innerText=postTitle;
        image.style.backgroundImage="url("+postImage+")";
        text.innerText=postText;
        date.innerText=postDate;
        article.appendChild(title);
        article.appendChild(image);
        article.appendChild(text);
        article.appendChild(date);
        main.appendChild(article);
    }

    var submit = document.getElementById("submit");

    submit.addEventListener("click", function(){
        var inputTitle = document.querySelector(".title").value;
        var inputImage = document.querySelector(".image").value;
        var inputText = document.querySelector(".text").value;
        var post = new Post(inputTitle, inputImage, inputText);
        Dashboard();
    });
    
})();

Answer 1

You are creating a new variable post within the click handler but your Dashboard is using one it captures in closure. You could make your Dashboard function to accept post as an argument.

 function Post(title, image, text) { this.title = title; this.image = image; this.text = text; this.date = new Date(); } function Dashboard(post) { var main = document.querySelector("main"); var article = document.createElement("div"); article.classList.add("post"); var title = document.createElement("h1"); var image = document.createElement("div"); image.classList.add("img"); var text = document.createElement("p"); var date = document.createElement("p"); var postTitle = post.title; var postImage = post.image; var postText = post.text; var postDate = post.date; title.innerText = postTitle; image.style.backgroundImage = "url(" + postImage + ")"; text.innerText = postText; date.innerText = postDate; article.appendChild(title); article.appendChild(image); article.appendChild(text); article.appendChild(date); main.appendChild(article); } var submit = document.getElementById("submit"); submit.addEventListener("click", function() { var inputTitle = document.querySelector(".title").value; var inputImage = document.querySelector(".image").value; var inputText = document.querySelector(".text").value; var post = new Post(inputTitle, inputImage, inputText); Dashboard(post); });

 <header> <input type="text" class="title"> <input type="text" class="image"> <textarea class="text"></textarea> <button id="submit">+</button> </header> <main> <div class="dashboard"></div> </main>