Question

我正在寻找一些代码的帮助。我应该创建一个表单，允许用户输入他们想要购买的商品的数量。输入数量时，将显示该特定项目的总价格，以及所有购买的总计（在表格底部）。当用户按下提交按钮时，会出现警告弹出窗口。

我在javascript中遇到了计算部分的问题。它不计算任何总量或数量值。（由于某种原因，代码在这里没有正确缩进，但它们在实际文档中。）

＆＃13;

function calc(){

var QtyA = 0; var QtyB = 0; var QtyC = 0;
var TotA = 0; var TotB = 0; var TotC = 0;
var PrcA = 3; var PrcB = 4; var PrcC = 5.50;
 
if (document.getElementById('QtyA').value > "");{
    QtyA = document.getElementById('QtyA').value;}
    TotA = eval(QtyA) * eval(PrcA);
    TotA = TotA.toFixed(2);
    (document.getElementById('TotalA').value = TotA);
	
if (document.getElementById('QtyB').value > "");{
    QtyB = document.getElementById('QtyB')value;}
    TotB = eval(QtyB) * eval(PrcB);
    TotB = TotB.toFixed(2);
    (document.getElementById('TotalB').value = TotB);
	
if (document.getElementById('QtyC').value > "");{
    QtyC = document.getElementById('QtyC')value;}
    TotC = eval(QtyC) * eval(PrcC);
    TotC = TotC.toFixed(2);
	(document.getElementById('TotalC')value = TotC);

    Totamt = eval(TotA) + eval(TotB) + eval(TotC);
    Totamt = Totamt.toFixed(2); //fix to 2 decimal places
    (document.getElementById('Grand Total is: ').value = Totamt);
    alert (Totamt);

＆＃13;

<html>
<head>
  <meta charset="UTF-8">
  <title>Order Form</title>
  <style>
    @import "css/OrderForm.css";
  </style>
  <body>
    <form>
      <table border="1">
        <tr>
          <th>Item</th>
          <th>Image</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Total</th>
        </tr>

        <tr>
          <td width="80">Hat</td>
          <td><img src="images/hat.jpg" alt="Hat"></td>
          <td><input type="text" id="QtyA" size="5" onchange "calc()"></td>
          <td>€3.00</td>
          <td>
            <input type="text" id="TotalA" size="12" onchange "calc()">
          </td>
        </tr>

        <tr>
          <td width="80">T Shirt</td>
          <td><img src="images/t_shirt.jpg" alt="Hat"></td>
          <td><input type="text" id="QtyA" size="5" onchange "calc()"></td>
          <td>€4.00</td>
          <td>
            <input type="text" id="TotalA" size="12" onchange "calc()">
          </td>
        </tr>

        <tr>
          <td width="80">Glasses</td>
          <td><img src="images/glasses.jpg" alt="Hat"></td>
          <td><input type="text" id="QtyA" size="5" onchange "calc()"></td>
          <td>€5.50</td>
          <td>
            <input type="text" id="TotalA" size="12" onchange "calc()">
          </td>
        </tr>

        <tr>
          <td> Total: </td>
          <td><input type="text" id="GrandTotal" size="15" onchange="calc()"></td>
        </tr>
      </table>

      <input type="submit" value="Submit">
      <input type="reset" value="Reset">

    </form>
  </body>
</html>

＆＃13;

Answer 1

好的，作为老师，我不能让所有人试图教你的坏习惯。所以，我们走了......

eval()是邪恶的 - 永远不要使用它！

eval() 告诉JavaScript运行时处理字符串，就好像它是JavaScript一样。这非常危险，因为如果字符串包含恶意代码，eval()将运行它。在您的代码中，您在输入到文本框中的eval()上运行value，因为您不知道将输入什么值，您也不知道将收到什么字符串eval()。这相当于一个巨大的安全漏洞，这是eval()不应该使用的原因之一。其次，即使在一个完美的世界中，eval()也很慢，所以从纯粹的表演角度来看，你不会想要使用它。坦率地说，我很震惊有人教你使用它，尤其是将字符串转换成数字。仅此就足以要求退还你的钱了！

在您的情况下，您需要将字符串输入转换为数字，以便您可以使用输入进行数学运算。 JavaScript提供了几种方法：

不要使用事件属性在HTML中设置事件处理。 首次创建JavaScript（25年前）时，为HTML元素（也称为DOM元素）设置事件处理程序的方法是使用HTML onclick，onchange，{{ 1}}等与HTML中的元素内联。不幸的是，由于这种技术看起来多么简单，它会被反复使用而不是死于它应得的快速死亡。有 several reasons not to use this outdated technique 。今天，我们要遵循现代标准和最佳做法，因此，事件处理应使用JavaScript进行，与HTML分开，使用 .addEventListener()

另外，您的代码onmouseover无论如何都是错误的，因为代码应该是：onchange "calc()"。

此外，请考虑需要为其设置事件的元素。您的原始代码已设置好，如果总数发生变化，onchange = "calc()"将会运行，但这没有任何意义。为什么有人能够直接改变总数，实际上会发生什么呢？数量是否会因总数发生变化而发生变化？

注意细节 您有3行计算3个数量* 3个价格可获得3个总计，但您只需复制/粘贴3行的HTML并使用3个输入元素和calc() id相同虽然您的JavaScript正在寻找QtyA和QtyB。

使用CSS制作样式，而不是HTML 您的所有数量输入字段都需要将其宽度设置为5.不要使用HTML QtyC属性，使用size CSS属性执行此操作。 HTML将更清晰，您不必再重复相同的指令3次。

@import使用不正确 CSS @import指令用作外部样式表中的第一行，用于从另一个样式表导入指令，有效地将多个表合并为一个。如果您只使用一个样式表，则无法导入它，而是链接到它。

而不是：width

使用：<style> @import "css/OrderForm.css";</style>

当您只是显示结果时，请勿将其放入表单字段中。 当您不希望用户能够修改该结果时，没有理由将总数放入<link href="css/OrderForm.css" rel="stylesheet">字段。相反，只需将其作为不可编辑元素的文本 - 在您的情况下是表格的适当单元格。

最后：使用开发人员的工具！ 所有现代浏览器都包含＆＃34;开发人员的工具＆＃34;，您可以通过按 F12 激活它们。工具中有很多选项卡，但是＆＃34; Console＆＃34;选项卡可能是您现在最重要的选项。如果您的语法有错误（就像您一样），控制台将显示它们和行号。您必须先消除所有语法错误，然后才能运行代码。

控制台也是用于测试代码中值的宝贵工具。您可以插入：

input

进入你的代码，验证变量，元素等是否具有你认为他们所做的值。

现在，实际上，我会以一种与你正在尝试的方式完全不同的方式来解决这个问题，但这比你在这个阶段已做好准备要复杂得多，所以我已经接受了你的方法一些。

请仔细阅读HTML和JavaScript评论，以解释正在做什么。

＆＃13;

console.log(anything that is supposed to produce a value);

＆＃13;

在javascript中计算订单上的数量和总数

1 个答案: