【发布时间】：2018-01-28 00:05:00
【问题描述】：
我正在尝试创建一个带有允许客户端复制表单的添加按钮的网站。在这样做的同时，我失去了由于重复而存在的隐藏/显示选项功能。 （ifYes 和ifNo div，应该根据客户选择显示）
我的问题在于我的 JavaScript 中的变量“Valu”，或者我认为是这样。
下面是我的代码的 sn-p：
HTML：
<select id="ValuType" name="ValuType" onchange="priceAndCheck()">
<option disabled="disabled" selected="selected">Type of Property</option>
<option id="Apartment" value="Apartment">Apartment</option>
<option id="Building" value="Building">Building</option>
<option id="Farm" value="Farm">Farm</option>
<option id="House" value="House">House</option>
<option id="Land" value="Land">Land</option>
</select>
<div id="ifYes" class="ifYes">
...ifYes content comes here...
</div>
<div id="ifNo" class="ifNo">
...ifNo content comes here...
</div>
JavaScript：
function yesnoCheck() {
var Valu = document.getElementById("ValuType").value;
if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
document.getElementById('ifYes').style.height = '250px';
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifYes').style.transition = 'all 1s ease 0.59s';
document.getElementById('ifNo').style.height = '0px';
document.getElementById('ifNo').style.overflow = 'hidden';
document.getElementById('ifNo').style.transition = '0.55s';
}
else if (Valu == 'Building' || Valu == 'House') {
document.getElementById('ifNo').style.height = '250px';
document.getElementById('ifNo').style.display = 'block';
document.getElementById('ifNo').style.transition = 'all 1s ease 0.59s';
document.getElementById('ifYes').style.height = '0px';
document.getElementById('ifYes').style.overflow = 'hidden';
document.getElementById('ifYes').style.transition = '0.55s';
}
else {
document.getElementById('ifYes').style.overflow = 'hidden';
document.getElementById('ifNo').style.overflow = 'hidden';
}
}
function providePrice() {
var a = document.getElementById("Region").value;
var b = document.getElementById("ValuReq").value;
var c = document.getElementById("ValuType").value;
var d = document.getElementById("Express").value;
var e = 25;
if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="Yes")
{
var x = 200 + e;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
else if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="No")
{
var x = 200;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
else if (a=="Region1" && b=="Bank" && c=="Building" && d=="Yes")
{
var x = 350 + e;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
...
...
...
else
{
document.getElementById("price").innerHTML = "Price:"
}
function getValue() {
if (document.getElementById("Express").checked) {
document.getElementById("Express").value = "Yes";
} else {
document.getElementById("Express").value = "No";
}
}
function priceAndCheck(){
yesnoCheck();
providePrice();
}
代码说明：
每当客户填写表格并选择某些选项时，它应该允许显示 div ifYes 或 ifNo 并填充价格。 （价格与多个字段相关，）我正在使用div 名称进行此操作，并且效果很好。但是，在克隆表单时，我无法为所有新克隆的表单生成 div ifYes 和 ifNo。
我认为问题出在以下几点：
- 我的
div命名是不变的（在所有克隆形式中完全相同），这是问题之一 - 调用
priceAndCheck()函数调用两个函数yesnoCheck()和providePrice()如果我开始调用一个元素，我需要更改所有函数（例如function test(selectElement)-- 尝试过 [Sam Apostel 的解决方案][1] 和无法使用我所有可用的编码查看所需的选项。 - 克隆的
div具有不同的id名称，但其中的所有其他divs具有相同的名称
如果您能就处理此问题的最佳方式提供帮助，我们将不胜感激。
【问题讨论】：
-
您在何时何地致电
function yesnoCheck()？ -
@irshadjm 抱歉，我忘记在更改选项时调用了两个函数。 onchange="priceAndCheck()" 里面有yesnoCheck()函数。
-
您正面临问题，因为一旦您的表单被复制，您将失去使用 id 获取对象的功能，因为现在您有多个具有相同 id 的元素，这是不允许的，在这种情况下，您将始终如果您尝试通过 ID 访问最后一个元素，我建议您更新逻辑以按类获取元素。
-
@amitwadhwani 当我使用上面的代码时，只有第一个元素具有功能。我将所有元素更改为通过 ClassName 接收，但它不起作用。我可能错过了一些东西，但我认为我的问题是我需要更改 ID 和类名的命名，对吗？
-
与其依赖 DOM，您能否将这些元素的列表保存在一个数组（/dictionary，以 ID 作为键）或其他东西（在创建和添加元素时增加数组到 DOM）？
标签： javascript html css forms clone