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

我是初学者，谈到HTML编码。我正在尝试完成在线计算机课程的作业。我给我的教授发了电子邮件，但他在这项任务中没有太多帮助。我必须创建一个简单的成本计算器，允许用户为每件商品添加最多三件商品的数量和价格。按下onclick按钮后，应显示总价格。我上周有类似的任务，并且能够自己完成编码和设计。我不知道这一个。这是迄今为止的代码。如何在HTML文档中使用javascript创建简单的成本计算器

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

来源

2015-05-02 JoyB

你能不能扩大，究竟你还不明白吗？ – ChaseHardin

你遇到的唯一真正的问题是名称中不能有空格，并且它们区分大小写，你应该能够找出其余的 – adeneo

你可以通过在这里包括'在你的代码中。 – ChaseHardin

既然这是一项任务，我不想给你全部答案，但是这应该让你开始。

你会发现，如果你把你的JavaScript在同一个文件，那么你就需要把它<script></script>标签内，您可以访问您的JavaScript通过引用id
。否则，您可以通过创建一个单独的JavaScript文件来引用它。例如：<script src="JavaScriptFile.js"></script>这将放置在您的<head></head>标签内。

在你HTML，要做到以下几点：

<input type="button" value="Calculate Total" id="calculations">

你的JavaScript看起来应该像下面这样：

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

来源

2015-05-02 02:55:37 ChaseHardin

你有几个问题在这里：

你的HTML格式不正确（你在<head>，显示标签h2，p，并且br标签只有你<body>标签中去（也有两个开放<body>标签）
你不应该使用空格在名称属性（如document.forms[0].item total2.value= st2;），因为它会让他们很难用javascript来引用，用下划线替换或者只是删除空格
你在内联事件处理程序中干扰了大量的javascript，这是一个错误，它应该全部移到它自己的位置<script>标签

通过给你的按钮的id属性，这样你就可以用JavaScript更轻松地访问它开始关闭：

<input type="button" value="Calculate Total" id="total" />

然后，您的交易</body>标签之前，添加一个新的<script>标签，并获得韩DLE到您的按钮，所有的内联逻辑移入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; 
}

有可能在此处进行还是有很多改进，但应该足以让你开始

来源

2015-05-02 02:56:22

首先，我将通过name属性为JavaScript使用id属性。如果你愿意，你可以同时拥有这两种产品，但使用getElementById（IMO）更容易。请注意0属性必须是唯一的。

<input type="text" id="costPerItem1" name="cost per item1" size="20"> 
<input type="text" id="costPerItem2" name="cost per item2" size="20"> 
...

其次，我会很惊讶，如果你的JavaScript将工作，但无论如何，它是更好的做法是你的JavaScript移动到<script>标签，使你可以在你的HTML中引用的函数。您还可以使用document.getElementById("the_element_id");在JavaScript中引用您的输入标签。因此，您需要在JavaScript中引用的每个元素都添加一个id属性！

通常的做法是将<script>标记放置在HTML文件的底部，但仍位于</html>标记内。

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

现在你的HTML ...

<input type="button" value="Calculate Total" onclick="onClick(event)" />

三，你的HTML结构是不正确的。一个典型的HTML结构看起来是这样的：

<html> 
    <head> 
     <title>A Title</title> 
    </head> 
    <body> 
     <!-- your content ---> 
    </body> 
</html>

的<head>标签是对您的网站的所有元数据相关的信息的标签。但没有任何内容与您的实际内容相关所以<head>标签应该只包含标记，如<meta>，<link>，<title>等

的<body>标签是你的实际内容的地方。您不应该有多于1 <head>或<body>标记。

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

应该在你的身体。另请注意，我将<center>标记和<FONT SIZE>标记更改为一个<span style="text-align:center;font-size:7px;">标记。

最后...

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

应该简单地

<body style="background:#006400">

来源

2015-05-02 02:57:22

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

回答

相关问题