HTML選擇期權價值計算

Question

我試圖從選擇HTML

的想法是選擇3個選項點擊確認並根據所選擇的選項，使用數學公式或價格（做一個簡單的「登記簿」不知道是什麼）一個數組（在每個var的表格的意義上）添加一個小時：從機器分鐘，並把它放在一個段落。

它會工作。 （只是學習HTML和CSS） 數學將是select2 * select3，在[select2（option1和option2）* select3 = samevalue）的情況下有一個例外 有人可以發佈模塊化簡單類型的代碼來幫助。

對於那些誰需要閱讀一些：（複製&貼* - *對不起，壓痕）

document.getElementById("Confirm").onClick = function() { 
 
    var entry = "" 
 

 
    document.getElementById("Televizor").onChange = function() { 
 
    if (this.selectedIndex !== 0) { 
 
     entry += this.value; 
 
    } 
 
    }; 
 

 
    document.getElementById("Controllere").onChange = function() { 
 
    if (this.selectedIndex !== 0) { 
 
     entry += this.value; 
 
    } 
 
    }; 
 

 
    document.getElementById("Timp").onChange = function() { 
 
    if (this.selectedIndex !== 0) { 
 
     entry += this.value; 
 
    } 
 
    }; 
 

 
    document.getElementById("Table").innerHTML = "<br> " + entry + Date(); 
 
    var entry = "" 
 
}

<h2>TV-uri</h2> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date &amp; Time.</button> 
 

 
<p id="demo">Dunno</p> 
 

 
<div class="container"> 
 
    <select id="Televizoare"> 
 
    <option value="0">Televizoare</option> 
 
    <option value="1">Tv 1</option> 
 
    <option value="2">Tv 2</option> 
 
    <option value="3">TV 3</option> 
 
    <option value="4">Tv 4</option> 
 
    <option value="5">TV 5</option> 
 
    <option value="6">Tv 6</option> 
 
    <option value="7">TV 7</option> 
 
    </select> 
 
    <select id="Controller"> 
 
    <option value="0">Controllere</option> 
 
    <option value="1c">1 Controller</option> 
 
    <option value="2c">2 Controllere</option> 
 
    <option value="3c">3 Controllere</option> 
 
    <option value="4c">4 Controllere</option> 
 
    </select> 
 
    <select id="Timp"> 
 
    <option value="0">Timp</option> 
 
    <option value="1h">1 ora</option> 
 
    <option value="1h2">1 ora 30 minute</option> 
 
    <option value="2h">2 ore</option> 
 
    <option value="2h2">2 ore 30 minute</option> 
 
    <option value="3h">3 ore</option> 
 
    </select> 
 
    <button id="Confirm" onclick="Confrim)">Confirm</button> 
 
</div> 
 

 
<p id="Table"></p>

Answer 1

嗯，你可以通過確保拼寫和大小寫開始你的ID和函數名稱匹配。

此外，您應該創建某種形式的驗證方法，以檢查所有字段是否有效，然後繼續計算方法。

不知道你在增加什麼，但如果你至少可以從表單域獲得足夠的值，那就是一半的戰鬥。

您還應該將所有字段放在表單對象中，以便您可以以傳統HTML方式與表單進行本地交互。

// Define the confirm clicke listener for the Confirm button. 
 
function confirm() { 
 
    // Grab all the fields and apply them to a map. 
 
    var fields = { 
 
    'Televizoare' : document.getElementById('Televizoare'), 
 
    'Controllere' : document.getElementById('Controllere'), 
 
    'Timp'  : document.getElementById('Timp') 
 
    }; 
 

 
    // Determine if the user selected an option for all fields. 
 
    var isValid = doValidation(fields); 
 
    if (!isValid) { 
 
    document.getElementById("Table").innerHTML = 'Please provide all fields!'; 
 
    return; 
 
    } 
 

 
    // Create listeners ??? 
 
    fields["Televizoare"].onChange = function(e) { }; 
 
    fields["Controllere"].onChange = function(e) { }; 
 
    fields["Timp"].onChange  = function(e) { }; 
 

 
    // Set the value of the paragraph to the selected values. 
 
    document.getElementById("Table").innerHTML = Object.keys(fields) 
 
    .map(field => fields[field].value) 
 
    .join(' — '); 
 
} 
 

 
// Validation function to check if ALL fields have options selected other than 0. 
 
function doValidation(fields) { 
 
    return [].every.call(Object.keys(fields), field => fields[field].selectedIndex !== 0); 
 
}

<h2>TV-uri</h2> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date &amp; Time.</button> 
 

 
<p id="demo">Dunno</p> 
 

 
<div class="container"> 
 
    <select id="Televizoare"> 
 
    <option value="0">Televizoare</option> 
 
    <option value="1">Tv 1</option> 
 
    <option value="2">Tv 2</option> 
 
    <option value="3">TV 3</option> 
 
    <option value="4">Tv 4</option> 
 
    <option value="5">TV 5</option> 
 
    <option value="6">Tv 6</option> 
 
    <option value="7">TV 7</option> 
 
    </select> 
 
    <select id="Controllere"> 
 
    <option value="0">Controllere</option> 
 
    <option value="1c">1 Controllere</option> 
 
    <option value="2c">2 Controllere</option> 
 
    <option value="3c">3 Controllere</option> 
 
    <option value="4c">4 Controllere</option> 
 
    </select> 
 
    <select id="Timp"> 
 
    <option value="0">Timp</option> 
 
    <option value="1h">1 ora</option> 
 
    <option value="1h2">1 ora 30 minute</option> 
 
    <option value="2h">2 ore</option> 
 
    <option value="2h2">2 ore 30 minute</option> 
 
    <option value="3h">3 ore</option> 
 
    </select> 
 
    <button id="Confirm" onclick="confirm()">Confirm</button> 
 
</div> 
 

 
<p id="Table"></p>