Question

我需要一些帮助才能在我的javascript计算中找到错误。

我需要自动计算输入框的总和，让我的用户能够使用+或 - 按钮编辑计算。

如果您手动输入数字，我已自动执行计算，但按+或 - 不会更改计算。

以下是代码：

<html>
<head>
<script language="javascript">
function Calc(className){
var elements = document.getElementsByClassName(className);
var total = 0;

for(var i = 0; i < elements.length; ++i){
total += parseInt(elements[i].value);
}

document.form0.total.value = total;
}

function addone(field) {
field.value = Number(field.value) + 1;
}

function subtractone(field) {
field.value = Number(field.value) - 1;
}
</script>

</head>
<body>
<form name="form0" id="form0">

1: <input type="text" name="box1" id="box1" class="add" value="0" onKeyUp="Calc('add')" onChange="updatesum()" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box1);">
<input type="button" value=" - " onclick="subtractone(box1);">
<br />

2: <input type="text" name="box2" id="box2" class="add" value="0" onKeyUp="Calc('add')" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box2);">
<input type="button" value=" - " onclick="subtractone(box2);">
<br />

3: <input type="text" name="box3" id="box3" class="add" value="0" onKeyUp="Calc('add')" onClick="this.focus();this.select();" />
<input type="button" value=" + " onclick="addone(box3);">
<input type="button" value=" - " onclick="subtractone(box3);">
<br />

<br />
Total: <input readonly style="border:0px; font-size:14; color:red;" id="total" name="total">

</form>
</body></html>

我确定问题必须很小，我只是不能指责它。

Answer 1

一种简单的方法是在单击按钮时更新总和。您可以将Calc('add')添加到onclick事件，或添加到addone和subtractone函数（您可能希望将该类添加为参数）。例如：

function addone(field) {
  field.value = Number(field.value) + 1;
  Calc('add');
}

function subtractone(field) {
  field.value = Number(field.value) - 1;
  Calc('add');
}

工作示例：http://jsbin.com/umimu4/

Answer 2

您需要在Calc('add')之后拨打电话addone()并致电subtractone()来电。

EX：

<input type="button" value=" + " onclick="addone(box1); Calc('add')">
<input type="button" value=" - " onclick="subtractone(box1); Calc('add')">

updatesum()方法似乎也缺失了。

我认为@Kobi有更好的答案。

Answer 3

这是你需要的吗？我改变了你自己的代码：

&lt;html&gt;
&lt;head&gt;
&lt;script language=&quot;javascript&quot;&gt;
function Calc(className){
var elements = document.getElementsByClassName(className);
var total = 0;

for(var i = 0; i &lt; elements.length; ++i){
total += parseInt(elements[i].value);
}

document.form0.total.value = total;
}

function addone(field) {
field.value = Number(field.value) + 1;
}

function subtractone(field) {
field.value = Number(field.value) - 1;
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name=&quot;form0&quot; id=&quot;form0&quot;&gt;

1: &lt;input type=&quot;text&quot; name=&quot;box1&quot; id=&quot;box1&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onChange=&quot;updatesum()&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box1); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box1); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

2: &lt;input type=&quot;text&quot; name=&quot;box2&quot; id=&quot;box2&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box2); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box2); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

3: &lt;input type=&quot;text&quot; name=&quot;box3&quot; id=&quot;box3&quot; class=&quot;add&quot; value=&quot;0&quot; onKeyUp=&quot;Calc(&#039;add&#039;)&quot; onClick=&quot;this.focus();this.select();&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot; + &quot; onclick=&quot;addone(box3); Calc(&#039;add&#039;)&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot; - &quot; onclick=&quot;subtractone(box3); Calc(&#039;add&#039;)&quot;&gt;
&lt;br /&gt;

&lt;br /&gt;
Total: &lt;input readonly style=&quot;border:0px; font-size:14; color:red;&quot; id=&quot;total&quot; name=&quot;total&quot;&gt;

&lt;/form&gt;
&lt;/body&gt;&lt;/html&gt;

用（+）和（ - ）自动计算Javascript

3 个答案: