Question

我正在寻找帮助解决此代码的帮助。我的任务是建立一个我可以制作多篇新文章的博客。我正在使用一个链接到提交按钮的事件监听器。但是当我运行带有插入文本框中的文本的代码时，没有任何反应。我没有给出控制台错误，所以我不知道出了什么问题。如果需要，请询问更多信息，因为我可能错过了至关重要的事情。

问题似乎是，我似乎无法在我的函数中创建另一个构造函数对象。这里出了什么问题..我错过了什么吗？

提前致谢。

//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>

Answer 1

我只是在我的系统中运行您的代码以了解您的需要。我注意到了一些事情。根据代码，您尝试形成提交， POST 处于活动状态，并将重定向到文件，即 html.html 。但是，您不提供 html.html 。首先，如果您提交表单然后点击按钮，您将重定向到操作网址。根据您的代码，我只是将一些内容更改为您的代码，我刚刚更改了操作网址，现在您可以看到是否在文本框中编写了任何内容，然后它会在提交按钮的下方显示。

要运行此代码，只需将此文件保存为.php扩展名即可。在HTML代码片段的末尾编写php代码，你只需将php代码放入同一个文件中。就像make文件名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;
}   ?>

Answer 2

夫妻俩：

如果您希望保持同一页面，则必须从表单中删除method和action。

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

最终结果：

＆＃13;

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

＆＃13;

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

＆＃13;

javascript如何使用用户输入添加构造函数对象

2 个答案: