我问,因为每次我使用第二个javascript我的代码都会出错。起初,JS文件是一个,我试图让它适用于我正在使用的两个选择标签。我无法实现它。称之为安静并复制它,但重命名一切以避免名称中的任何冲突。但我的错误仍在继续。也许我的代码有问题或者?
html Head
<head>
<title>Packages</title>
<link rel="icon" type="image/ico" href="../favicon.ico"/>
<link rel="stylesheet" type="text/css" href="../style/style_p.css"/>
<script type="text/javascript" src="../style/add_fields.js"></script>
<script type="text/javascript" src="../style/addMoreFields.js"></script>
<h1><img src="../images/Logo.png" alt="Logo"></h1>
</head>
JS 1
var instance = 0;
function moreFields(parentHome, cloneHome) {
// Check if there isn't more than 3 fields
if(instance != 3) {
instance++;
// Create a child
var TempClone = document.getElementById(parentHome).cloneNode(true);
// remove templet clone's id to avoid future confusion
TempClone.id = "";
TempClone.style.display = 'block';
/* Get the cloned templet's
* Children. Here we will make
* only the ones who have a name
* unique.
*/
var cloneC = TempClone.childNodes;
for(var i = 0; i < cloneC.length; i++) {
var ChildName = cloneC[i].name;
if(ChildName)
cloneC[i].name = ChildName + instance;
}
// Locate clone's home
var insertHere = document.getElementById(cloneHome);
// Place clone in home
insertHere.parentNode.insertBefore(TempClone,insertHere);
}
}
window.onload = function() {
moreFields('SnackBox', 'SnackPlate');
}
JS2
var counter = 0;
function addMoreFields(srcHome, cloneHome) {
// Check if there isn't more than 3 fields
if(counter != 3) {
counter++;
// Create a child
var template = document.getElementById(srcHome).cloneNode(true);
// remove templet clone's id to avoid future confusion
template.id = "";
template.style.display = 'block';
/* Get the cloned templet's
* Children. Here we will make
* only the ones who have a name
* unique.
*/
var copy = template.childNodes;
for(var i = 0; i < copy.length; i++) {
var cloneName = copy[i].name;
if(cloneName)
copy[i].name = cloneName + counter;
}
// Locate clone's home
var endLocation = document.getElementById(copyHome);
// Place clone in home
endLocation.parentNode.insertBefore(Template,endLocation);
}
}
window.onload = function() {
addMreFields('SoupBox', 'SoupBowl');
}
html代码
<td><div id="SnackBox" style="display:none">
<select id="dfood" name="dfood">
<option>--Select--</option>
<?php
$result = mysql_query("SELECT * FROM survival_mode.dryfood_t", $link);
while($row = mysql_fetch_array($result)) {
echo "\n\t\t\t\t\t\t<option value='{$row['dfood_ID']}'>{$row['dfood_name']}</option>";
}
echo "\n";
?>
</select>
<input name="df_qty" type="text" placeholder="qty" size="1" maxlength="1"/>
<?php
if($climate == "warm") {
echo "\n\t\t\t\t<input type='button' value='-' onclick='if(instance > 1){instance--; this.parentNode.parentNode.removeChild(this.parentNode);}' />";
echo "\n\t\t\t\t<input type='button' value='+' onclick='moreFields(\"SnackBox\", \"SnackPlate\");' />";
}
echo "\n";
?>
</div>
<span id="SnackPlate"></span>
</td>
<td><div id="SoupBox">
<select id="Soup" name="Soup">
<option>--Select--</option>
<?php
$result = mysql_query("SELECT * FROM survival_mode.soup_t", $link);
while($row = mysql_fetch_array($result)) {
echo "\n\t\t\t\t\t\t<option value='{$row['soup_ID']}'>{$row['soup_name']}</option>";
}
echo "\n";
?>
</select>
<input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
<?php
if($climate == "cold") {
echo "\n\t\t\t\t<input type='button' value='-' onclick='if(counter > 1){counter--; this.parentNode.parentNode.removeChild(this.parentNode);}' />";
echo "\n\t\t\t\t<input type='button' value='+' onclick='addMoreFields(\"SoupBox\", \"SoupBowl\");' />";
}
echo "\n";
?>
</div>
<span id="SoupBowl"></span>
</td>