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

javascript How to add constructor object with user input

本文关键字：对象 用户 输入 构造函数 何添加 添加      更新时间：2023-09-26

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

问题似乎是，我似乎不能在我的函数中创建另一个构造函数对象。这里出了什么问题…我错过什么了吗?

提前感谢。

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

几件事:

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

最终结果:

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

我只是在我的系统中运行您的代码来了解您的需要。我没有注意到什么。根据代码，您正在尝试形成提交，这将是POST活动，并将重定向到文件即html.html。但是html.html不是由您提供的。首先，如果你提交表单，然后点击按钮，你将重定向到动作URL。根据你的代码，我只是在你的代码中改变了一些东西，我只是改变了action 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;
}   ?>
相关文章：