0

我正在寻求帮助解决此代码。我的任务是做一个博客，我可以在上面写多篇新文章。我正在使用一个事件监听器，链接到提交按钮。但是，当我在文本框中插入文本运行代码时，什么也没有发生。我没有收到控制台错误，所以我不知道出了什么问题。如果需要，请询问更多信息，因为我可能错过了一些重要的信息。

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

提前致谢。

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

4

2 回答 2

0

几件事：

如果您的意图是保持在同一页面上，则必须从表单中删除methodand 。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();
 });

最后结果：

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

于 2016-10-15T17:58:15.030 回答
0

我只是在我的系统中运行您的代码以了解您的需求。我注意到几件事。根据您尝试提交的代码，该提交将处于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-15T16:31:50.730 回答