DEVHIDE
Login Or Sign up

javascript How to add constructor object with user input

3.3k Views Asked by At

I'm looking for help troubleshooting this code. My assignment is to make a blog which I can make multiple new articles on. I am using an event listener, linked to the submit button. But when I run the code with text inserted in the textboxes nothing happens. I am given no console errors, so I don't know what is going wrong. Please ask for more information if needed, as I might've missed something crucial.

The problem seems to be, that I can't seem to make another constructor object inside my function. What is going wrong here.. Am I missing something?

Thanks in advance.

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

javascript arrays events multiple-constructors
Original Q&A
2

There are 2 best solutions below

0
Gabs00 On BEST ANSWER

Couple things:

IF your intention is to stay on the same page, you have to remove the method and action from the form.

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

becomes

<form>

And then call e.preventDefault() inside of the submit event handler

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

You did not call the addToHTML function anywhere

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

Final result:

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

1
Rana Pratap Singh On

I just run your code in my system to understand you need. I noticed few thing. As per code you are trying to form submit which will be POST active and will redirect to file namely html.html . But html.html is not provided by you. First thing if your submitting form then on button click you will redirect to the action URL. As per your code I just altered few things into your code, I just changed action URL and now you can see if you write anything in textbox then it will show you on below of submit button.

To run this code just save this file into .php extension. At the end of HTML snippet php code is written you just put php code into same file. Like make file name demo.php and put both HTML and PHP into same file.

<!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;
}   ?>

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in EVENTS

Related Questions in MULTIPLE-CONSTRUCTORS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

dbora

Copyright © 2021 Jogjafile Inc.