Question

我有一个程序，需要使用javascript来计算在组合框中选择的所有总数到文本框。我的问题是它无法正常工作...我需要你帮助的人...我还在学习。

<form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optB">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optC">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
    |
  <select name="optD">
  <option></option>
  <option onclick="optTotal()" value="1">1</option>
  <option onclick="optTotal()" value="2">2</option>
  <option onclick="optTotal()" value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>

这是我的javascript代码：

<script>
function optTotal()
{
var a1 = document.querySelector('input[name="optA"]:selected');
var b1 = document.querySelector('input[name="optB"]:selected');
var c1 = document.querySelector('input[name="optC"]:selected');
var d1 = document.querySelector('input[name="optD"]:selected');
if (a1 != null)
    a1 = parseFloat(a1.value);
else
    a1 = 0;
if (b1 != null)
    b1 = parseFloat(b1.value);
else
    b1 = 0;
if (c1 != null)
    c1 = parseFloat(c1.value);
else
    c1 = 0;
if (d1 != null)
    d1 = parseFloat(d1.value);
else
    d1 = 0;

document.frm.total.value=parseFloat(a1)+parseFloat(b1)+parseFloat(c1)+parseFloat(d1);
}
</script>

我的代码问题是什么？任何人？

Answer 1

您可以使用以下内容：

var formSelects = document.querySelectorAll('#frm select');
var Sum = 0;
for (var i = 0; i < formSelects.length; i++) {
    if(formSelects[i].value != '') Sum += parseFloat(formSelects[i].value);
}

我的建议是您删除所有内联脚本并使用如下：

window.onload = function () {
    function optTotal() {
        var Sum = 0;
        for (var i = 0; i < formSelects.length; i++) {
            if (formSelects[i].value != '') Sum += parseFloat(formSelects[i].value);
        }
        alert(Sum);
    }

    var formSelects = document.querySelectorAll('#frm select');
    for (var i = 0; i < formSelects.length; i++) {
        formSelects[i].onchange = optTotal;
    }

};

Demo

Answer 2

你应该使用正确的值检查这是一个工作代码。这是一个演示http://jsbin.com/uriFida/2/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optB" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optC" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
    |
  <select name="optD" onchange="optTotal()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>
</body>
</html>

的Javascript

function optTotal()
{
    var a1 = document.querySelector('select[name="optA"]');
    var b1 = document.querySelector('select[name="optB"]');
    var c1 = document.querySelector('select[name="optC"]');
    var d1 = document.querySelector('select[name="optD"]');

    if (a1.value && a1.value != "")
        a1 = parseFloat(a1.value);
    else
        a1 = 0;

    if (b1.value && b1.value != "")
        b1 = parseFloat(b1.value);
    else
        b1 = 0;

    if (c1.value && c1.value != "")
        c1 = parseFloat(c1.value);
    else
        c1 = 0;

    if (d1.value && d1.value != "")
        d1 = parseFloat(d1.value);
    else
        d1 = 0;

      document.getElementById("total").value = parseFloat(a1)+parseFloat(b1)+parseFloat(c1)+parseFloat(d1);

}

Answer 3

尝试这样的事情

<强> HTML

<form method="post" action="index.php" name="frm" id="frm" >
  <input type="text" name="name" id="query" />
  <select name="optA" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optB" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optC" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
    |
  <select name="optD" onchange="optTotal()">
  <option></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  </select>
  <input type="text" name="total" id="total" onKeyUp="optTotal()" />
  <input type="submit" value="Test" name="calculate" id="press" />
</form>

<强> JAVASCRIPT

function optTotal()
{
    var a1 = document.getElementsByName('optA')[0].value;
    var b1 = document.getElementsByName('optB')[0].value;
    var c1 = document.getElementsByName('optC')[0].value;
    var d1 = document.getElementsByName('optD')[0].value;
    var total = 0;
    console.log(a1)
    if (a1 != '')
        total += parseFloat(a1);
    if (b1 != '')
        total += parseFloat(b1);
    if (c1 != '')
        total += parseFloat(c1);
    if (d1 != '')
        total += parseFloat(d1);

    document.frm.total.value=total;
}

使用javascript在组合框中总计所有值

3 个答案:

Demo