javascript 사용자 입력을 사용하여 생성자 객체를 추가하는 방법

이 코드 문제를 해결하는 데 도움이 필요합니다. 나의 임무는 여러 개의 새로운 기사를 만들 수있는 블로그를 만드는 것이다. 제출 버튼에 연결된 이벤트 리스너를 사용하고 있습니다. 그러나 텍스트 상자에 텍스트를 삽입 한 코드를 실행해도 아무런 변화가 없습니다. 나는 콘솔 오류를주지 않았으므로 어떤 점이 잘못되었는지 알지 못합니다. 내가 중요한 것을 놓친 것일 수도 있으므로 필요한 경우 더 많은 정보를 요청하십시오.javascript 사용자 입력을 사용하여 생성자 객체를 추가하는 방법

문제는 내 함수 내에서 다른 생성자 개체를 만들 수없는 것으로 보입니다. 여기서 뭐가 잘못되고있는거야 .. 내가 놓친 게 있니?

미리 감사드립니다.

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

 
//Blog object model 
 
function Blog() { 
 
    this.post = []; 
 

 
    this.addPost = function(post) { 
 
    this.post.push(post); 
 
    } 
 
} 
 

 
//new Post object 
 
var post1 = new Post('1', 'hej.jpg', 'hej hej hej'); 
 

 
//new Blog object 
 
var blog = new Blog; 
 

 
//adds the post to the empty array 
 
blog.addPost(post1); 
 

 
//function to add Blog posts to HTML content 
 
function addToHTML() { 
 
    for(var i = 0; i < blog.post.length; i++) { 
 
    var article = document.querySelector('#blog_posts'); 
 
    var title = document.createElement('h1'); 
 
    var date = document.createElement('p'); 
 
    var image = document.createElement('img'); 
 
    var text = document.createElement('p'); 
 
    var blog_title = blog.post[i].title; 
 
    var blog_date = blog.post[i].date; 
 
    var blog_image = blog.post[i].image; 
 
    var blog_text = blog.post[i].text; 
 
    title.textContent=blog_title; 
 
    date.textContent=blog_date; 
 
    image.setAttribute('src', blog_image); 
 
    text.textContent=blog_text; 
 
    article.appendChild(title); 
 
    article.appendChild(date); 
 
    article.appendChild(image); 
 
    article.appendChild(text); 
 
    } 
 
} 
 

 
//Submit button 
 
var submit = document.getElementById('submit'); 
 

 
//Event listener 
 
submit.addEventListener('click', function getTarget() { 
 
    var jsTitleInput = document.getElementById('title_input').value; 
 
    var jsImageInput = document.getElementById('image_input').value; 
 
    var jsTextInput = document.getElementById('text1_input').value; 
 
    var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput); 
 
    blog.addPost(newPostf); 
 
    })

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
     <title>CodeCamp blog</title> 
 
     <link href="css.css" type="text/css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
    <h1 id="maintitle">Foodparadise</h1> 
 
     <nav id="menu"> 
 
     <ul> 
 
      <li class="menu_left"><a href="">Home</a></li> 
 
      <li class="menu_left"><a href="">About</a></li> 
 
      <li class="menu_right"><input type="text" name="search" placeholder="Search.."></li> 
 
      <li class="menu_right"><a href="" id="new_post" class="btn">New post</a> 
 
      </ul> 
 
     </nav> 
 

 
     <article id="blog_posts"></article> 
 

 
     <article id="archive"></article> 
 

 
     <div id='newPost'> 
 
      <form action='html.html' method='post'> 
 
      <p>Title:</p> 
 
      <input type='text' name='title' id='title_input'> 
 

 
      <p>Image Name: </p> 
 
      <input type='text' name='image name' id='image_input'> 
 

 
      <p>Text:</p> 
 
      <input type='text' name='text' id='text1_input'> 
 
      <br/> 
 
      <input type='submit' name='submit' value='Submit' id='submit'> 
 
     </form> 
 
     </div> 
 
     </div> 
 
    <script src="js.js"></script> 
 
</body> 
 
</html>

출처

2016-10-15 user7023766

제출을 누르면 어떻게됩니까? – Gabs00

제출을 누르면 함수는 사용자 입력을 가져와이를 사용하여 "새 게시물"개체를 만듭니다. 나는 각 입력 요소의 .value를 저장하고 그 값을 새 게시물에 삽입하여이 작업을 시도했습니다. – user7023766

커플 가지 : 당신의 의도가 동일한 페이지에 유지하는 것입니다

경우, 당신은 양식에서 method 및 action를 제거해야합니다.

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

 
//Blog object model 
 
function Blog() { 
 
    this.post = []; 
 

 
    this.addPost = function(post) { 
 
    this.post.push(post); 
 
    } 
 
} 
 

 
//new Post object 
 
var post1 = new Post('1', 'hej.jpg', 'hej hej hej'); 
 

 
//new Blog object 
 
var blog = new Blog(); 
 

 
//adds the post to the empty array 
 
blog.addPost(post1); 
 

 
//function to add Blog posts to HTML content 
 
function addToHTML() { 
 
    for(var i = 0; i < blog.post.length; i++) { 
 
    var article = document.querySelector('#blog_posts'); 
 
    var title = document.createElement('h1'); 
 
    var date = document.createElement('p'); 
 
    var image = document.createElement('img'); 
 
    var text = document.createElement('p'); 
 
    var blog_title = blog.post[i].title; 
 
    var blog_date = blog.post[i].date; 
 
    var blog_image = blog.post[i].image; 
 
    var blog_text = blog.post[i].text; 
 
    title.textContent=blog_title; 
 
    date.textContent=blog_date; 
 
    image.setAttribute('src', blog_image); 
 
    text.textContent=blog_text; 
 
    article.appendChild(title); 
 
    article.appendChild(date); 
 
    article.appendChild(image); 
 
    article.appendChild(text); 
 
    } 
 
} 
 

 
//Submit button 
 
var submit = document.getElementById('submit'); 
 

 
//Event listener 
 
submit.addEventListener('click', function getTarget(e) { 
 
    e.preventDefault() 
 
    var jsTitleInput = document.getElementById('title_input').value; 
 
    var jsImageInput = document.getElementById('image_input').value; 
 
    var jsTextInput = document.getElementById('text1_input').value; 
 
    var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput); 
 
    blog.addPost(newPostf); 
 
    addToHTML(); 
 
});

<div id="container"> 
 
    <h1 id="maintitle">Foodparadise</h1> 
 
     <nav id="menu"> 
 
     <ul> 
 
      <li class="menu_left"><a href="">Home</a></li> 
 
      <li class="menu_left"><a href="">About</a></li> 
 
      <li class="menu_right"><input type="text" name="search" placeholder="Search.."></li> 
 
      <li class="menu_right"><a href="" id="new_post" class="btn">New post</a> 
 
      </ul> 
 
     </nav> 
 

 
     <article id="blog_posts"></article> 
 

 
     <article id="archive"></article> 
 

 
     <div id='newPost'> 
 
      <form> 
 
      <p>Title:</p> 
 
      <input type='text' name='title' id='title_input'> 
 

 
      <p>Image Name: </p> 
 
      <input type='text' name='image name' id='image_input'> 
 

 
      <p>Text:</p> 
 
      <input type='text' name='text' id='text1_input'> 
 
      <br/> 
 
      <input type='submit' name='submit' value='Submit' id='submit'> 
 
     </form> 
 
     </div> 
 
     </div>

<form action='' method='post'> 

becomes 

<form>

그리고 제출 이벤트 핸들러 내부 e.preventDefault() 전화

submit.addEventListener('click', function getTarget(e) { 
    e.preventDefault()

당신은 addToHTML 기능 어디서나

submit.addEventListener('click', function getTarget(e) { 
    e.preventDefault() 
    var jsTitleInput = document.getElementById('title_input').value; 
    var jsImageInput = document.getElementById('image_input').value; 
    var jsTextInput = document.getElementById('text1_input').value; 
    var newPostf = new Post(jsTitleInput, jsImageInput, jsTextInput); 
    blog.addPost(newPostf); 
    addToHTML(); 
});

최종 결과를 호출하지 않았다

출처

2016-10-15 17:58:15 Gabs00

난 그냥 당신이 필요로 이해하는 내 시스템에서 코드를 실행합니다. 나는 거의 눈치 채지 못했다. 코드 당 POST이 될 제출 양식을 작성하려고 시도하고 있으며 즉 html.html으로 리디렉션됩니다. 하지만 html.html은 제공되지 않습니다. 먼저 버튼을 클릭하여 제출 양식을 제출하면 조치 URL으로 리디렉션됩니다. 귀하의 코드에 따라 귀하의 코드에 몇 가지만 변경 했으므로 방금 액션 URL을 변경 했으므로 이제 텍스트 상자에 아무 것도 쓰지 않으면 제출 버튼이 표시됩니다.

이 코드를 실행하려면이 파일을 .php 확장자로 저장하십시오. HTML 조각의 끝에서 PHP 코드는 PHP 코드를 동일한 파일에 넣는 것으로 작성되었습니다. 파일 이름을 demo.php로 만들고 HTML과 PHP를 같은 파일에 넣으십시오.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
     <title>CodeCamp blog</title> 
     <link href="css.css" type="text/css" rel="stylesheet"/> 
</head> 
<body> 
    <div id="container"> 
    <h1 id="maintitle">Foodparadise</h1> 
     <nav id="menu"> 
     <ul> 
      <li class="menu_left"><a href="">Home</a></li> 
      <li class="menu_left"><a href="">About</a></li> 
      <li class="menu_right"><input type="text" name="search" placeholder="Search.."></li> 
      <li class="menu_right"><a href="" id="new_post" class="btn">New post</a> 
      </ul> 
     </nav> 

     <article id="blog_posts"></article> 

     <article id="archive"></article> 

     <div id='newPost'> 
      <form action='' method='post'> 
      <p>Title:</p> 
      <input type='text' name='title' id='title_input'> 

      <p>Image Name: </p> 
      <input type='text' name='image_name' id='image_input'> 

      <p>Text:</p> 
      <input type='text' name='text' id='text1_input'> 
      <br/> 
      <input type='submit' name='submit' value='Submit' id='submit'> 
     </form> 
     </div> 
     </div> 
    <script src="js.js"></script> 
</body> 
</html>

<?php  
    if(isset($_POST['submit'])){ //check if form was submitted 
    $title = $_POST['title']; //get input text 
    $image_name = $_POST['image_name']; //get input text 
    $text = $_POST['text']; //get input text 
    $message = "Your title is: ".$title.'<br>'.'and image name is: '.$image_name."<br>".'and text is: '.$text; 
    echo $message; 
} ?>

출처

2016-10-15 16:31:50 Rana

제안 해 주셔서 감사합니다. 현재 javascript/Jquery에만 제한되어 있으므로 php는 나를위한 옵션이 아닙니다. HTML 시트 1 개에서만 작동하므로보고있는 HTML 시트는 html.html 파일의 내용입니다. – user7023766

javascript 사용자 입력을 사용하여 생성자 객체를 추가하는 방법

답변

관련 문제