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>
2 個解決方案
解決方案1
0 2016-10-15 16:31:50
我只是在系統中運行您的代碼以了解您的需求。 我注意到了幾件事。 根據代碼，您嘗試形成Submit ，它將處於POST激活狀態，並將重定向到html.html文件。 但是html.html不是您提供的。 首先，如果您提交表單，然后單擊按鈕，您將重定向到操作URL 。 根據您的代碼，我只是在代碼中做了幾處更改，我只是更改了操作 URL，現在您可以看到是否在文本框中編寫了任何內容，然后它將在“提交”按鈕的下方顯示。
要運行此代碼，只需將此文件保存為.php擴展名。 在HTML片段php代碼的末尾，您只需將php代碼放入同一文件中即可。 像make文件名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;
} ?>
解決方案2
0 已采納 2016-10-15 17:58:15
幾件事情：
如果您打算保留在同一頁面上，則必須從表單中刪除method和action 。
<form action='' method='post'>
becomes
<form>
然后在e.preventDefault()事件處理程序中調用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>
我應該如何處理JavaScript中對象構造函數的無效輸入
[英]How should I deal with invalid input to an object constructor in JavaScript
如何向構造函數創建的javascript對象的所有實例添加數據/函數？
[英]How to add data/functions to all instances of a javascript object created by a constructor?
Javascript - 如何向對象構造函數添加屬性
[英]Javascript - how do you add properties to an object constructor function
如何在javascript中使用提示輸入在object中添加新的object class
[英]How to add new object in object class using prompt input in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.