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

时间：2022-11-29 20:23:27

I have a program that needs to compute all the total selected in combo box to text box using javascript..my problem is its not working it wont total..i need your help guys..im still learning.

我有一个程序，需要使用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>

here is my javascript code:

这是我的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>

whats the problem with my code??anyone guys?

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

3 个解决方案

#1

1  

You should use a proper checking of values here is a working code. Here is a demo http://jsbin.com/uriFida/2/edit

你应该使用正确的值检查这是一个工作代码。这是一个演示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

使用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);

}

#2

1  

You could use something like this:

你可以使用这样的东西：

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);
}

My suggestion is you remove all inline script and use like:

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

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

#3

0  

try something like this

尝试这样的事情

HTML

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

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;
}

#1

1  

You should use a proper checking of values here is a working code. Here is a demo http://jsbin.com/uriFida/2/edit

你应该使用正确的值检查这是一个工作代码。这是一个演示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

使用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);

}

#2

1  

You could use something like this:

你可以使用这样的东西：

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);
}

My suggestion is you remove all inline script and use like:

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

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

#3

0  

try something like this

尝试这样的事情

HTML

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

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;
}
标签：

相关文章