0
我正在嘗試創建一個網站，其中包含一個允許客戶端複製表單的添加按鈕。雖然這樣做，但我正在失去由於重複而存在的隱藏/顯示選項功能。 （ifYes和ifNo divs，應根據客戶選擇顯示）爲不同ID名稱的div提供內容
我的問題在於我的JavaScript中的變量'Valu'，所以我假設。
下面是我的代碼片段：
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。
在哪裏我相信問題在於在以下幾點：
- 我
divnamings是不變（完全一樣在所有的克隆形式），這是問題 - 一個調用
priceAndCheck()函數調用兩個函數yesnoCheck()和providePrice()，這使得我需要改變所有功能，如果我開始調用一個元素（例如function test(selectElement)- 嘗試[Sam Apostel的解決方案] [1]，並且無法根據需要查看我的所有可用編碼的選項 - 被克隆的
div有不同的id名稱，但都在其他divs具有相同的命名
將是對什麼是處理這個問題的最佳途徑一定的幫助表示感謝。
何時何地你叫'功能yesnoCheck（）'？ –
@irshadjm對不起，忘記了當我改變選項時我調用了兩個函數。 onchange =「priceAndCheck（）」在其中具有函數yesnoCheck（）。 –
你面臨的問題，因爲一旦你的表單被複制，你將失去使用ID獲取對象的功能，因爲現在你有多個具有相同ID的元素，這是不允許的，在這種情況下，你總是會得到最後一個元素的引用，如果你的嘗試通過ID來訪問它，我建議你更新你的邏輯來逐個獲取元素。 –