JavaScript 构造函数返回未定义的值答案

【问题标题】：JavaScript constructor function returns values as undefinedJavaScript 构造函数返回未定义的值
【发布时间】：2021-03-17 21:18:03
【问题描述】：

我正在尝试制作一个脚本，该脚本在提交时从表单值创建一个对象，但在每次提交时它都将值返回为 undefined 。

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

【问题讨论】：

标签： javascript function object constructor

【解决方案1】：

您正在单击处理程序中创建一个新变量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>

【讨论】：