在 HTML 编码方面，我是初学者。我正在尝试完成在线计算机类(class)的作业。我已经给我的教授发了邮件，但他对这项作业没有太大帮助。我必须创建一个简单的成本计算器，允许用户为最多三个项目添加每个项目的数量和价格。按下 onclick 按钮后，应显示总价。上周我有一个类似的任务，能够自己完成编码和设计。我想不通这个。这是我目前拥有的代码。
<html>
<head> <title> Name </title>
<br/> <br/>
<h2> <p style="text-indent: 22em;"> <FONT SIZE="7" <center> Easy Cost Calculator</center> </FONT SIZE> </h2>
<style type="text/css">
body {background-color:light blue;
color: blue;
font-family: rockwell;
}
</style>
</head>
<body>
<body style="background:#006400">
<form> <br/>
<center> <table border="2" cellpadding="25" cellspacing="25" bgcolor=lightgreen>
<tr>
<th> # of Items </th>
<th> Cost Per Item</th>
<th> Item Total</th> </tr>
<tr> <td> <input type="text" name="quantity1" size="20"> </td><td> <input type="text" name="cost per item1" size="20"> </td><td> <input type="text" name="item total1" readonly> </td> </tr>
<tr> <td> <input type="text" name="quantity2" size="20"> </td> <td> <input type="text" name="cost per item2" size="20"> </td> <td> <input type="text" name="item total2" readonly> </td> </tr>
<tr> <td> <input type="text" name="quantity3" size="20"> </td> <td> <input type="text" name="cost per item3" size="20"></td> <td> <input type="text" name="item total3" readonly> </td> </tr>
<tr> <center> <td> <input type="text" name="Total" readonly> </td> <td> <input type="button" value="Calculate Total" onclick='
var q1 = document.forms[0].quantity1.value;
var q2= document.forms[0].quantity2.value;
var q3= document.forms[0].quantity3.value;
var cpi1 = document.forms[0]. cost per item1.value;
var cpi2= document.forms[0]. cost per item2.value;
var cpi3= document.forms[0]. cost per item3.value;
var st11= q1*cpi1;
document.forms[0].item total1.value= st11;
var st2= q2*cpi2;
document.forms[0].item total2.value= st2;
var st3= q3*cpi3;
document.forms[0]. item total3.value= st3;
var tc =st11+st2+st3 ;
document.forms[0].total.value= tc;
'>
</button> </center> </td> </tr>
</table>
<br/> <br/>
</center>
</form>
</body>
</html>
最佳答案
这里有一些问题:
- 您的 HTML 格式不正确(您在
h2中有p、br和<head>标签，显示标签仅在您的<body>标签内(您还有两个开始<body>标签) - 您不应该在名称属性中使用空格(例如
document.forms[0].item total2.value= st2;)，因为这会使它们难以用 javascript 引用，请用下划线替换或直接删除空格 - 你在内联事件处理程序中塞进了大量的 javascript，这是一个错误，它应该全部移动到它自己的
<script>标签
首先给你的按钮一个 id属性，以便您可以使用 Javascript 更轻松地访问它:
<input type="button" value="Calculate Total" id="total" />
然后，在你结束之前</body>标记，添加一个新的 <script>标记并获取按钮的句柄并将所有内联逻辑移动到 onclick 中事件处理程序:
// get a handle to your button by referencing its id attribute
var button = document.getElementById('total');
// programmatically add your click handler
button.onclick = function(){
var q1 = document.forms[0].quantity1.value;
var q2= document.forms[0].quantity2.value;
var q3= document.forms[0].quantity3.value;
var cpi1 = document.forms[0].costperitem1.value;
var cpi2= document.forms[0].costperitem2.value;
var cpi3= document.forms[0].costperitem3.value;
var st11= q1*cpi1;
document.forms[0].itemtotal1.value= st11;
var st2= q2*cpi2;
document.forms[0].itemtotal2.value= st2;
var st3= q3*cpi3;
document.forms[0].itemtotal3.value= st3;
var tc =st11+st2+st3 ;
document.forms[0].total.value= tc;
}
这里还有很多可以改进的地方，但这应该足以让你开始
关于javascript - 如何在 HTML 文档中使用 javascript 创建一个简单的成本计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29997713/