我是 Javascript 新手。我正在尝试创建一个用于撰写评论的页面。我卡在了某个点上。
应该有一个按钮来添加一个部分，它复制整个部分 div 以允许用户编写另一个部分。
下面附上我的代码。我正在使用 CKeditor 插件来允许最终用户按照他们的意愿格式化他们的文本。
当前代码在创建新部分时不允许用户写入创建的文本区域。请指导我哪里弄错了。
<?php
include 'settings.php';
if (!isset($dbc)){
$dbc = new mysqli(DB_HOST , DB_USER , DB_PASSWORD , DB_NAME);
}
if ($dbc -> connect_error){
die ("Cannot connect to the database");
}
?>
<html>
<head>
<title>Write a new Review.</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id = "new_review" action = "form.php" method = "post">
<div id = "header">
<h2> Header Section. </h2>
Author : <input type = "text" id = "author"> <br>
Title: <input type = "text" id = "title"> <br>
Tagline: <input type = "text" id = "tagline" > <br>
Score: <input type = "text" id = "score" > <br>
Pros: <textarea class = "ckeditor" id = "pros">
Please enter the pro's of the product here.
</textarea>
Cons: <textarea class = "ckeditor" id = "cons">
Please enter the cons of the product here.
</textarea>
Verdict:<textarea class = "ckeditor" id = "verdict">
Enter your vedict here.
</textarea>
</div>
<div id = "sections">
<h2> Sections. </h2>
<input type = "button" id="button" onclick="duplicate()">Add a section</button>
<div class = "section_base" id = "section">
Section Icon: <input type="file" id="icon" accept="image/*"> <br>
Section Title: <input type = "text" id = "section_title" > <br>
Section Text: <textarea class = "ckeditor" id = "section_text">
Enter you text here.
</textarea>
Section Score: <input type = "text" id = "section_score">
</div>
</div>
<div id = "conclusion">
<h2> Conclusion: </h2>
<textarea class = "ckeditor" id = "conclusions">
Enter your conclusion here.
</textarea>
</div>
<input type = "submit" value="submit">
</form>
<script type="text/javascript">
var i = 0;
var original = document.getElementById('section');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "section" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
</script>
</body>
</html>
以下是我获得信息的链接。
http://ckeditor.com/ckeditor_4.3_beta/samples/replacebyclass.html
最佳答案
试试你的javascript
<script type="text/javascript">
var i = 1;
function duplicate() {
var clone = '<div class = "section_base" id = "section">Section Icon: <input type="file" id="icon" accept="image/*"> <br> Section Title: <input type = "text" id = "section_title" > <br> Section Text: <textarea id = "section_text'+i+'"> Enter you text here. </textarea>Section Score: <input type = "text" id = "section_score"> </div>';
var div = document.getElementById('sections');
var newdiv = document.createElement('div');
newdiv.innerHTML = clone;
div.appendChild(newdiv);
CKEDITOR.replace('section_text'+i);
i++;
}
</script>
关于javascript - 动态复制表单文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31334887/