Блог

Я пытаюсь создать скрипт, который создает объект при отправке из значений формы, но при каждой отправке он возвращает значения как неопределенные.

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

Это мой скрипт:

 (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();
    });
    
})();
 

Вы создаете новую переменную post в обработчике щелчков, но Dashboard используете ту, которую он фиксирует при закрытии. Вы могли бы заставить свою Dashboard функцию принимать post в качестве аргумента.

 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>