如何在HTML文档中使用javascript创建简单的成本计算器_Javascript_Html

如何在HTML文档中使用javascript创建简单的成本计算器

javascript html

如何在HTML文档中使用javascript创建简单的成本计算器,javascript,html,Javascript,Html,我是HTML编码的初学者。我正在努力完成一个在线计算机课程的作业。我已经给我的教授发了电子邮件，但他在这项作业上帮不了多少忙。我必须创建一个简单的成本计算器，允许用户为最多三个项目添加每个项目的数量和价格。按下onclick按钮后，应显示总价。上周我有一个类似的任务，能够自己完成编码和设计。我想不出这个。这是我到目前为止掌握的代码 <html> <head> <title> Name </title> <br/&g

我是HTML编码的初学者。我正在努力完成一个在线计算机课程的作业。我已经给我的教授发了电子邮件，但他在这项作业上帮不了多少忙。我必须创建一个简单的成本计算器，允许用户为最多三个项目添加每个项目的数量和价格。按下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>


名称



既然这是一项作业，我不想给你完整的答案，但这应该可以让你开始了

您会注意到，您可以通过引用id

如果将JavaScript保存在同一个文件中，则需要将其放在
标记中。否则，您可以通过创建单独的JavaScript文件来引用它。例如：
这将被放置在您的
标签中

在HTML中，您要执行以下操作：
<input type="button" value="Calculate Total" id="calculations">

document.getElementById('calculations').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].cost1.value;
    var cpi2 = document.forms[0].cost2.value;
    var cpi3 = document.forms[0].cost3.value;
    var st11 = q1 * cpi1;
    document.forms[0].total1.value = st11;
    var st2 = q2 * cpi2;
    document.forms[0].total2.value = st2;
    var st3 = q3 * cpi3;
    document.forms[0].total3.value = st3;
    var tc = st11 + st2 + st3;
    document.forms[0].total.value = tc;
}

这里有几个问题：

您的HTML格式不正确（您在
中有h2
、p
和br
标记，显示标记仅在
标记内（您还有两个打开的
标记）

您不应该在名称属性（例如，document.forms[0].item total2.value=st2；
）中使用空格，因为这会使它们难以用javascript引用、替换为下划线或删除空格
您在内联事件处理程序中阻塞了大量javascript，这是一个错误，它应该全部移动到自己的
标记中

首先，为您的按钮提供一个id
属性，以便您可以使用Javascript更轻松地访问它：
<input type="button" value="Calculate Total" id="total" />

这里仍然有许多改进，但这应该足以让您开始
首先，我将使用JavaScript的id
属性，而不是name
属性。如果您愿意，可以同时使用这两个属性，但使用getElementById
要容易得多（IMO）。请注意，id
属性必须是唯一的
<input type="text" id="costPerItem1" name="cost per item1" size="20">
<input type="text" id="costPerItem2" name="cost per item2" size="20">
...

现在你的HTML
<input type="button" value="Calculate Total" onclick="onClick(event)" />



第三，您的HTML结构不正确。典型的HTML结构如下所示：
<html>
    <head>
        <title>A Title</title>
    </head>
    <body>
        <!-- your content --->
    </body>
</html>


头衔

标记用于标记有关您网站的所有元数据相关信息。但与您的实际内容无关。因此
标记应仅包含
、
等标记
标记是您实际内容的位置。您不应该有超过1个
或
标记
<script>
var onClick = function(event) {
     var q1 = document.getElemenById('quantity1').value;
     var q2 = document.getElemenById('quantity2').value;
     var q3 = document.getElemenById('quantity3').value;  
     //var q1 = document.forms[0].quantity1.value;
     //var q2= document.forms[0].quantity2.value;
     //var q3= document.forms[0].quantity3.value;

     var cpi1 = document.getElementById('costPerItem1').value;
     var cpi2 = document.getElementById('costPerItem2').value;
     var cpi3 = document.getElementById('costPerItem3').value;

     //this is invalid javascript because of the whitespace.
     //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;

     //this is also invalid javascript because of the whitespaces "item total"

     document.getElementById('itemTotal1').value = st11;
     //document.forms[0].item total1.value= st11;

     var st2= q2*cpi2;

     document.getElementById('itemTotal2').value = st2;
     //document.forms[0].item total2.value= st2;

     var st3= q3*cpi3;

     document.getElementById('itemTotal3').value = st3;
     //document.forms[0]. item total3.value= st3;

     var tc = st11 + st2 + st3;

     //this is valid javascript, but to be consistent, and in case
     //you ever add more forms in the same page...
     //document.forms[0].total.value= tc;
     document.getElementById('total').value = tc;
};
</script>

<h2> <p style="text-indent: 22em;"> <span style="text-align:center;font-size:7px"> Easy Cost Calculator</span>  </h2>

简易成本计算器

应该在你的身体里。还要注意我把
标签和
标签改成了一个
标签

<script> var onClick = function(event) { var q1 = document.getElemenById('quantity1').value; var q2 = document.getElemenById('quantity2').value; var q3 = document.getElemenById('quantity3').value; //var q1 = document.forms[0].quantity1.value; //var q2= document.forms[0].quantity2.value; //var q3= document.forms[0].quantity3.value; var cpi1 = document.getElementById('costPerItem1').value; var cpi2 = document.getElementById('costPerItem2').value; var cpi3 = document.getElementById('costPerItem3').value; //this is invalid javascript because of the whitespace. //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; //this is also invalid javascript because of the whitespaces "item total" document.getElementById('itemTotal1').value = st11; //document.forms[0].item total1.value= st11; var st2= q2*cpi2; document.getElementById('itemTotal2').value = st2; //document.forms[0].item total2.value= st2; var st3= q3*cpi3; document.getElementById('itemTotal3').value = st3; //document.forms[0]. item total3.value= st3; var tc = st11 + st2 + st3; //this is valid javascript, but to be consistent, and in case //you ever add more forms in the same page... //document.forms[0].total.value= tc; document.getElementById('total').value = tc; }; </script>

<h2> <p style="text-indent: 22em;"> <span style="text-align:center;font-size:7px"> Easy Cost Calculator</span> </h2>
最后

<body> <body style="background:#006400">

应该是

<body style="background:#006400">

你能扩展一下吗，你到底不明白什么？你唯一真正的问题是，名字中不能有空格，而且它们是区分大小写的，你应该能够通过在代码中包含
代码来找出引用JavaScript的REST。你有很多错误。你的浏览器控制台会帮助你调试，但您使用的是不推荐的和过时的标记，元素的位置不正确，更不用说语法错误了。您可以使用专有名称->来实现这一点，正如其他人所说，这完全是无效和过时的，一旦您使用它，您应该真正了解当前的标准等。