用事件折扣（onChange）Javascript不起作用？

Question

我用Javascript创建折扣，这是脚本

    <script>

            function hitung()
                  {
                    var x = document.getElementById('TOTAL').value;
                    var y = document.getElementById('DISKON').value;  

                    var besarDiskon = x * (y/100);


                    var grandTotal = x - besarDiskon;

                    document.getElementById('GTOTAL').value = grandTotal;

                  } 

    </script>

    <input type='text' name='TOTAL' size='20' id='TOTAL' value='200000'>
    <input type='text' name='DISKON' size='20' id='DISKON' onChange='hitung()' placeholder='Diskon'>    
    <input type='text' name='GRANDTOTAL' size='20' id='GTOTAL' onChange='hitung()' placeholder='Grand Total'>

运行良好，但我需要的是文本框值从mysql获取数据

<input type='text' name='TOTAL' size='20' id='TOTAL' value='<?php echo $data[TOTAL];?>'>

如果我运行该脚本，则结果为NaN。

任何人都可以帮我解决这个问题。

我非常感谢你的回答

由于

Answer 1

的 live demo 的

HTML（只需删除内联JS）：

<input type='text' name='TOTAL' size='20' id='TOTAL' value='200000'>
<input type='text' name='DISKON' size='20' id='DISKON' placeholder='Diskon'>    
<input type='text' name='GRANDTOTAL' size='20' id='GTOTAL' placeholder='Grand Total'>

JS：

function el(id){return document.getElementById(id);}
var $tot = el("TOTAL");
var $dis = el("DISKON");
var $gto = el("GTOTAL");

function hitung(){
  var tv = parseInt($tot.value, 10);
  var dv = parseInt($dis.value, 10);  
  var besarDiskon = tv * (dv/100);
  var grandTotal = tv - besarDiskon;
  $dis.value = dv +'% (-'+ besarDiskon +')';
  $gto.value = grandTotal;
}

$dis.addEventListener("change", hitung, false);