如何从Input和Radio按钮动态获取值,将它们推送到数组并调用它们进行各种计算

时间:2013-11-01 06:05:43

标签: javascript html arrays

我想从输入字段(amount)和单选按钮(tType)动态获取值,并将它们推入格式为(amount,date,tType)的数组中。然后我想用数组做两件事:1。获取所有金额并将其相加以获得总金额。 2.列出阵列中的所有数据。这就是我所拥有的:

   var Transaction = function(amount) {
        this.amount = amount
        this.date = (function() {
            var d = new Date();
            var minutes = d.getMinutes();
            var month = d.getMonth() +1;
            if (minutes<10) {
                return (d.getDate() + "/" + month + "/" + d.getFullYear() + " " + d.getHours() + ":" + "0" + minutes);
            } else {
                return (d.getDate() + "/" + month + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes);
            }
        })();


    var radios = document.getElementsByName('tType');

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            // do whatever you want with the checked radio
            return(radios[i].value);

            // only one radio can be logically checked, don't check the rest
            break;
        }
    }
        this.type= radios;
    };
    var movements =[];
    var allAmounts = [];

    function clearFields(){ 
            document.getElementById("initialAmount").value="";
            document.getElementById("amountIn").value="";
            document.getElementById("amountOut").value="";
         };

    //addInitialBalance
    function addInitialBalance(){
    var a = Number(document.getElementById("initialAmount").value);
    var initialBalance = new Transaction(a);
    movements.unshift([initialBalance.amount,initialBalance.date,initialBalance.type]);
    }
    //add IN
    function addIn(){
    var aI = Number(document.getElementById("amountIn").value);
    var aIn = new Transaction(aI);
    movements.push([aIn.amount,aIn.date, aIn.type]);
    }
    //add OUT
    function addOut(){
    var aO = Number(document.getElementById("amountOut").value);
    var aOut = new Transaction(-aO);
    movements.push([aOut.amount, aOut.date, aOut.type]);
    }

    //display movements
    function list(){
        var html=" "
        for(var i in movements){
        html+=("<p>" + movements[i][0]+ " " + movements[i][1] + " " + movements[i][2] + "</p>")}
        document.getElementById("listSpace").innerHTML = html;
    }

    //get the total

    function getTotal(){
        for(var j in movements){
            allAmounts.push(movements[j][0]);
        }
        var total = (allAmounts.reduce(function(a,b){
            return a+b ; 
            },0));
        document.getElementById("total").innerHTML = ("Your current balance is " +total);
    }

这是我的html与调用和显示getTotal()和list()函数

有关
      <div data-role="content" >
          <span id="total" style="text-align:center"></span>
      </div>

      <p style="text-align: center;" >
              <b style="margin-top:10%" onClick="getTotal()"><button>Calculate</button>
              </b>
      </p>
</div>

<div data-role="collapsible-set">
          <div data-role="collapsible" data-collapsed="true" onClick="list()">
              <h3>
                  10 Last movements
              </h3>
              <div data-controltype="textblock"><span id="listSpace"> </span>


              </div>

不能弄清楚我做错了什么。当我按下calculate按钮时,与collapsible onClick无关。任何帮助将非常感谢

0 个答案:

没有答案