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>