0
私はこのコードのトラブルシューティングのヘルプを探しています。私の任務は、私が複数の新しい記事を作ることができるブログを作ることです。送信ボタンにリンクされたイベントリスナーを使用しています。しかし、テキストボックスにテキストを挿入してコードを実行すると、何も起こりません。私はコンソールエラーがないので、何がうまくいかないのか分かりません。重要なことを逃したかもしれないので、必要に応じて詳細な情報を求めてください。javascriptユーザー入力でコンストラクタオブジェクトを追加する方法
問題は、私の機能の中に別のコンストラクタオブジェクトを作成することができないようです。ここで何がうまくいかないのですか？何か不足していますか？
ありがとうございます。
//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>
送信が押されたときに起こるはずのことは何ですか？ – Gabs00
submitを押すと、関数はユーザの入力を受け取り、それを使って "新しい投稿"オブジェクトを作成することになっています。私は各入力要素の.valueを保存し、これらの値を新しいPostに挿入することでこれを試みました。 – user7023766