>source

양식 값에서 제출할 때 개체를 만드는 스크립트를 만들려고하지만 제출할 때마다 다음과 같이 값을 반환합니다.찾으시는 주소가 없습니다.

이것은 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>
    
    

관련 자료

  • 이전 JavaScript split () 메서드의 혼동
  • 다음 c++ - 클래스를 생성하고 저장하는 대신 생성하는 방법