HTML选择选项VALUE计算

时间:2017-07-18 17:35:53

标签: javascript html

我正在努力制作一本简单的注册表"来自选择的HTML

这个想法是3选择选项点击确认,并根据所选的选项用数学公式定价或(不知道是什么)数组(在每个变量的表格中)添加一小时:从机器分钟并将其放在段落中。

它会起作用。 (只是学习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 = ""
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

好吧,您可以先确保您的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(' &mdash; ');
}

// 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>