时间戳

首页 > 解决方案 > 如何编写计算总价、清除按钮值并提交表单的函数

javascript - 如何编写计算总价、清除按钮值并提交表单的函数

问题描述

已经尝试了一切，但它似乎没有工作，我是 javascript 的新手，任何帮助将不胜感激。谢谢你。

<html>

<body>
  <div id="form">
    <form name="this form" method="post" action="">
      <label> Item description</label>
      <input type="text" name="Item description" value="Red copper bowl" />
      <label>Quantity</label>
      <input type="number" name="quantity" value="1" />
      <label> Price</label>
      <input type="number" name="price" value="$450" readonly="" />
      <label>total price</label>
      <input type="Number" name="" value="" />
      <input type="button" value="Calculate Total" onclick="calculate total()" />
      <input type="button" value="submit" on-submit="submit()" />
    </form>
  </div>

  <script type="text/JavaScript">
    function calculateTotal() { var totalPrice = "$450"; var Quantity = document.getElementById("quantity").value; var price = document.getElementById("price").value; total = quantity * price; alert("Quantity cannot be zero, blank or null"); alert("Price cannot be zero, blank or null"); document.getElementById("totalPrice").innerHTML = totalPrice; return; } function clearTotal() { document.getElementById("Quantity").innerHTML = ""; document.getElementById("price").innerHTML = ""; return; } function
    submit() { return confirm( "is the information correct ? \n ItemDescription = RedBowl nQuantity = 1 nPrice = $450" ); }
  </script>
</body>

</html>

标签： javascripthtml

解决方案

所以......您的代码存在无数问题，但最重要的是可读性。请学习构建您的代码。

需要指出的几个错误：

  1. 没有“提交时”的方法
  2. 阅读 JS 函数的命名约定，因为 'calculate total()' 不是一个有效的名称，您在计算总计按钮上使用了该名称。
  3. 您正在尝试通过 ID 获取元素，但您忘记分配任何内容。
  4. 再次命名约定，“数量”用于存储数量输入框的值，但您在计算中使用了“数量”。
  5. 你不能为输入框设置innerHtml。
  6. 您将字符串值分配给“totalPrice”，然后在乘法中使用相同的值。

<html>

<body>
  <div id="form">
    <form name="this form" method="post" action="">
      <label> Item description</label>
      <input type="text" name="Item description" value="Red copper bowl" />
      <label>Quantity</label>
      <input type="number" id="quantity" name="quantity" value="1" />
      <label> Price</label>
      <input type="number" id="price" name="price" value="450" readonly="" />
      <label>total price</label>
      <input type="number" id="totalPrice" name="" value="450" />
      <input type="button" value="Calculate Total" onclick="calculateTotal()" />
      <input type="button" value="submit" onclick="submit()" />
       <input type="button" value="reset" onclick="clearTotal()" />
    </form>
  </div>

  <script type="text/JavaScript">
    function calculateTotal() { 
      //const totalPrice = "450";
      let quantity = document.getElementById("quantity").value; 
      let price = document.getElementById("price").value;
      let total = quantity * price;
      console.log(total)
      document.getElementById("totalPrice").value = total; 
    }
    
    function clearTotal() { 
      document.getElementById("quantity").value = 1;
      document.getElementById("totalPrice").value = 450; 
    } 
    function submit() { 
        return window.confirm( "is the information correct ? \n ItemDescription = RedBowl nQuantity = 1 nPrice = $450" ); 
    }
  </script>
  
</body>

</html>

最后但并非最不重要：https ://www.w3schools.com/js/js_conventions.asp

推荐阅读