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

这是有效的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

像这样编写你的函数......

 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 3

您需要捕获函数内部的值，而不是首次运行脚本时。另外，添加type =＆＃34; button＆＃34;按钮停止提交表格。

即：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

首先，由于需要阻止的表单和按钮，您的页面才会刷新。

下面我提供了代码。

  <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 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来“一次性”选择所有输入，而不是按ID分别获取所有输入：

var inputs = [].slice.call(document.querySelectorAll('input[type=number]'));

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

a + b + c + d执行字符串连接而不是添加，因为.value会返回字符串。即如果输入为1，2，3和4，则total的值将为字符串"1234"，而不是数字{ {1}}。

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

如果将DOM元素放在数组中，我们可以使用.reduce求和的值。

示例：

Number

默认情况下，

function fungsi() { var sum = inputs.reduce(function(sum, input) { return sum + Number(input.value); }, 0); total.value = sum; }元素是提交按钮，即点击按钮即可提交表单。这将导致浏览器向表单的目标发送请求并加载该方。由于您没有提供目标，浏览器基本上会重新加载页面，因此您将看不到JavaScript所做的更改。

您可以使用<button>将按钮声明为“虚拟”按钮来禁用此行为：

type="button"

样本

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

按钮onclick，计算总价（Javascript）

5 个答案: