javascript 如何使用用户输入添加构造函数对象
javascript How to add constructor object with user input
我正在寻求解决此代码问题的帮助。我的任务是创建一个博客，我可以在上面发表多篇新文章。我正在使用一个链接到提交按钮的事件监听器。但是当我 运行 在文本框中插入文本的代码时，什么也没有发生。我没有收到控制台错误，所以我不知道出了什么问题。如果需要，请询问更多信息，因为我可能错过了一些重要的事情。
问题似乎是，我似乎无法在我的函数中创建另一个构造函数对象。这里出了什么问题..我错过了什么吗？
提前致谢。
//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>
我只是运行你的代码在我的系统中了解你的需要。我注意到了一些事情。根据您尝试提交的代码，它将 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;
} ?>
两件事：
如果您的意图是停留在同一页面上，您必须从表单中删除 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 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>
我只是运行你的代码在我的系统中了解你的需要。我注意到了一些事情。根据您尝试提交的代码，它将 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;
} ?>
两件事：
如果您的意图是停留在同一页面上，您必须从表单中删除 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>