按钮onclick，统计总价(Javascript)

Question

这应该很简单，但我做错了。当我点击带有 onclick 事件的按钮到一个函数时，总价不会显示在输入中。我的代码有什么问题？

<html>

<body>
    <h1>KASIR</h1>

    <form>
        -------<b>Nama Barang</b>----------------------------<b>Harga</b>--------
        <br>
        <input type=text> Rp.
        <input id="a" type=number>
        <br>
        <input type=text> Rp.
        <input id="b" type=number>
        <br>
        <input type=text> Rp.
        <input id="c" type=number>
        <br>
        <input type=text> Rp.
        <input id="d" type=number>
        <br>
        <br>
        <button onclick="fungsi()">Hitung!</button> <b>Total</b> Rp.
        <input id="total" type=number>
    </form>

    <script>
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        var c = document.getElementById("c").value;
        var d = document.getElementById("d").value;

        var total = a + b + c + d;

        function fungsi() {
            document.getElementById("total").value = total;
        }
    </script>

</body>

</html>

Answer 1

像这样写你的函数...

 function fungsi() {

    var a = document.getElementById("a").value;
    var b = document.getElementById("b").value;
    var c = document.getElementById("c").value;
    var d = document.getElementById("d").value;

    var total = a + b + c + d;
        document.getElementById("total").value = total;
    }

没错，首先删除表单标签，因为它会刷新页面，然后像这样将变量从字符串转换为数字..

       function fungsi(){
            var a = Number(document.getElementById("a").value);
            var b = Number(document.getElementById("b").value);
            var c = Number(document.getElementById("c").value);
            var d = Number(document.getElementById("d").value);

            var total = a + b + c + d;

            document.getElementById("total").value = total;

        }

Answer 2

您需要在函数内部捕获值，而不是在脚本第一个时捕获值运行。此外，将 type="button" 添加到按钮会停止提交表单。

即：

function fungsi(){
            var a = parseFloat(document.getElementById("a").value);
          var b = parseFloat(document.getElementById("b").value);
          var c = parseFloat(document.getElementById("c").value);
          var d = parseFloat(document.getElementById("d").value);

            a = a ? a : 0;
            b = b ? b : 0;
            c = c ? c : 0;
            d = d ? d : 0;

          var total = a + b + c + d;
          document.getElementById("total").value = total;
}

function fungsi() {
  var a = parseFloat(document.getElementById("a").value);
  var b = parseFloat(document.getElementById("b").value);
  var c = parseFloat(document.getElementById("c").value);
  var d = parseFloat(document.getElementById("d").value);

  a = a ? a : 0;
  b = b ? b : 0;
  c = c ? c : 0;
  d = d ? d : 0;

  var total = a + b + c + d;
  document.getElementById("total").value = total;
}

<form>
  -------<b>Nama Barang</b>----------------------------<b>Harga</b>------
  <br>
  <input type=text>Rp.
  <input id="a" type=number>
  <br>
  <input type=text>Rp.
  <input id="b" type=number>
  <br>
  <input type=text>Rp.
  <input id="c" type=number>
  <br>
  <input type=text>Rp.
  <input id="d" type=number>
  <br>
  <br>
  <button onclick="fungsi()" type="button">Hitung!</button> <b>Total</b>Rp.
  <input id="total" type=number>
</form>

Answer 3

首先，您的页面正在刷新，因为表单和按钮需要阻止。

下面我提供了代码。

  <form>
            <br>
            <input type=text> Rp.
            <input id="a" type=number>
            <br>
            <input type=text> Rp.
            <input id="b" type=number>
            <br>
            <input type=text> Rp.
            <input id="c" type=number>
            <br>
            <input type=text> Rp.
            <input id="d" type=number>
            <br>
            <br>
            <button id="buttonClick" >Hitung!</button> <b>Total</b> Rp.
            <input id="total" type="button"/>
        </form>

        <script>
            $("#buttonClick").click(function (event) {
                event.preventDefault();
                var a = document.getElementById("a").value;
                var b = document.getElementById("b").value;
                var c = document.getElementById("c").value;
                var d = document.getElementById("d").value;

                var total = a + b + c + d;

                document.getElementById("total").value = total;
                alert('jkhejhS');
            });
        </script>

Answer 4

这有效

function fungsi() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  var d = document.getElementById("d").value;

   var total = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d);
  document.getElementById("total").value = total;
}

 <h1>KASIR</h1>

<form>
  -------<b>Nama Barang</b>----------------------------<b>Harga</b>--------
  <br>
  <input type=text>Rp.
  <input id="a" type=number>
  <br>
  <input type=text>Rp.
  <input id="b" type=number>
  <br>
  <input type=text>Rp.
  <input id="c" type=number>
  <br>
  <input type=text>Rp.
  <input id="d" type=number>
  <br>
  <br>
  <button onclick="fungsi()">Hitung!</button> <b>Total</b> Rp.
  <input id="total" type=number>
</form>

Answer 5

您的代码有几个问题。

JavaScript 在页面加载时执行。这意味着您在用户有机会输入它们之前 获得了 input 值。

total、a、b 等不会在用户输入值时神奇地更新它们的值。您必须在单击按钮时检索值，即在事件处理程序中。但是，您可以存储对 DOM 元素本身的引用，这样您就不必在每次按下按钮时都查找它们。

为了以后使用方便，我建议把它们放到一个数组中：

// Array of input elements var inputs = [ document.getElementById("a"), document.getElementById("b"). // ... ]; var total = document.getElementById("total"); function fungsi() { // here you get their values e.g. console.log(inputs[0].value); // but we will see a better way to compute the total }

您也可以使用 document.querySelectorAll 来 select 全部 "at once":
，而不是通过 ID 单独获取每个输入
var inputs = [].slice.call(document.querySelectorAll('input[type=number]'));

[].slice.call 部分是将 querySelectorAll 返回的 NodeList 转换为实际数组所必需的。

a + b + c + d 执行 字符串连接 而不是加法，因为 .value returns 一个 字符串。 IE。如果输入是 1、2、3 和 4，total 的值将是字符串 "1234" 而不是数字 10.

您必须先将值转换为数字。有多种方法可以做到这一点。其中之一是将字符串值传递给 Number 函数。

如果将 DOM 个元素放入数组中，我们可以使用 .reduce 来求和这些值。

示例：

function fungsi() { var sum = inputs.reduce(function(sum, input) { return sum + Number(input.value); }, 0); total.value = sum; }

<button> 元素默认是 submit 按钮，即点击按钮将提交表单。这将导致浏览器向表单的目标发送请求并加载该端。由于您没有提供目标，浏览器基本上会重新加载页面，因此您不会看到 JavaScript.
所做的更改
您可以通过使用 type="button":
将按钮声明为 "dummy" 按钮来禁用此行为
<button type="button" onclick="fungsi()">Hitung!</button>

演示

var inputs = [].slice.call(document.querySelectorAll('input[type=number]')); var total = document.getElementById("total"); function fungsi() { var sum = inputs.reduce(function(sum, input) { return sum + Number(input.value); }, 0); total.value = sum; }

<h1>KASIR</h1> <form> -------<b>Nama Barang</b>----------------------------<b>Harga</b>-------- <br> <input type=text>Rp. <input id="a" type=number> <br> <input type=text>Rp. <input id="b" type=number> <br> <input type=text>Rp. <input id="c" type=number> <br> <input type=text>Rp. <input id="d" type=number> <br> <br> <button type="button" onclick="fungsi()">Hitung!</button> <b>Total</b> Rp. <input id="total" type=number> </form>

按钮onclick，统计总价(Javascript)

Button onclick, count the total price (Javascript)

javascript

dom

javascript-events