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