JS平均计算器

Question

I cant get everything centered. 我不能集中一切。 this is what i get: 这就是我得到的：

xxx    xxx    xxx   xxx   xxx

what I want is 我想要的是

   xxx  
xxx  
xxx  
xxx  
xxx

centered horizonally in the webpage 在网页上水平居中

I also cant get the average functionality to work.I dont know where I am going wrong. 我也无法正常使用功能。我不知道我要去哪里。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Average Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<h1 style="text-align:center;">My Average Calculator</h1>
<script type="text/javascript">
function getTotal() {
var form = document.getElementById('number');
var numb1 = parseInt(form.numb1.value);
var numb2 = parseInt(form.numb2.value);
var numb3 = parseInt(form.numb3.value);
var numb4 = parseInt(form.numb4.value);
var numb5 = parseInt(form.numb5.value);
var total = document.getElementById('total');
var average = document.getElementById('average');
if (!numb1) {
    numb1 = 0;
}

if (!numb2) {
    numb2 = 0;
}

if (!numb3) {
    numb3 = 0;
}

if (!numb4) {
    numb4 = 0;
}
if (!numb5) {
    numb5 = 0;
}

total.innerHTML = 'Total: ' + (numb1 + numb2 + numb3 + numb4 + numb5);
average.innerHTML = 'Average: ' + (total / 5);
}
</script>
</head>
<form id="number">   
<body>
First Number: <input type="text" name="numb1" onkeyup="getTotal ();" />
Second Number: <input type="text" name="numb2" onkeyup="getTotal();" />
Third Number:  <input type="text" name="numb3" onkeyup="getTotal();" />
Fourth Number: <input type="text" name="numb4" onkeyup="getTotal();" />
Fifth Number:  <input type="text" name="numb5" onkeyup="getTotal();" />
    <div id="total">Total:     </div>
    <div id="average">Average: </div>
</body>
</html>

Answer 1

total / 5 , where total is an element you fetched by ID. total / 5 ，其中total是您通过ID获取的元素。 No wonder it doesn't work ;) 难怪它不起作用;）

Also, you may want to learn about loops. 另外，您可能想了解循环。 Instead of numb1 through numb5 , iterate. 迭代从numb1到numb5 。

Something like this could work nicely: 这样的事情可能会很好地工作：

<fieldset id="numbers"><legend>Numbers</legend>
    First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
    Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
    Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
    Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
    Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="total">Total: --</div>
<div id="average">Average: --</div>
<script type="text/javascript">
    function getTotal() {
        var inputs = document.getElementById('numbers').getElementsByTagName('input'),
            count = inputs.length, i, total = 0;
        for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
        document.getElementById('total').firstChild.nodeValue = "Total: "+total;
        document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
    }
</script>

Answer 2

在每个输入标签的末尾添加BR标签<br/>并进行更改

average.innerHTML = 'Average: ' + ((numb1 + numb2 + numb3 + numb4 + numb5) / 5);

JS平均计算器

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-02-14 00:01:30

解决方案2
0 2013-02-14 00:06:01

JS平均计算器

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-02-14 00:01:30

解决方案2 0 2013-02-14 00:06:01

解决方案1
1 已采纳 2013-02-14 00:01:30

解决方案2
0 2013-02-14 00:06:01