bugfix> javascript > 投稿

フォームの値から送信時にオブジェクトを作成するスクリプトを作成しようとしていますが、送信するたびに次のような値が返されます。未定義

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

回答 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>
    
    

あなたの答え