变量值：原型

Question

I have a simple prototype. 我有一个简单的原型。 I want to keep updating the value of Balance as payments are made. 我要在付款时不断更新余额的值。 I want to ask how can I maintain the value of 'Balance' variable using HTML, CSS, Javascript, and Bootstrap. 我想问一下如何使用HTML，CSS，Javascript和Bootstrap维护“ Balance”变量的值。 Once I click Submit, the value returns to the initial value of $10. 单击“提交”后，该值返回到$ 10的初始值。 I have tried to do this using javascript. 我尝试使用javascript做到这一点。 The simple code is as follows: 简单的代码如下：

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="default.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
     var output=10;


     function payment(){

     var amount= document.getElementById ("amountID");

     var merchant= document.getElementById("merchantID");


     output = output - amount.value;

     amount.value=" ";
     var balance=document.getElementById("balance");
     balance.innerHTML = output ;

     }
    </script>

  </head><body>
    <div class="row">
      <div class="col-md-12">
        <div class="headline">
          <h1>Payment</h1>
        </div>
      </div>
    </div>

    <div class="row">
        <div class="col-xs-3 col-md-3 col-lg-3">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active">
                    <a data-toggle="tab" href="#pay">Pay</a>
                  </li>
                  <li>
                    <a data-toggle="tab" href="#send">Send</a>
                  </li>

                </ul>
        </div>    

        <div class="col-xs-9 col-lg-9 col-md-9"> 
                <div class="tab-content">
                  <div id="pay" class="tab-pane fade in active">

                    <div class="row">
                        <label class="col-md-4"  style="text-align:right ;"> Available Balance:</label>

                    <label class="col-md-4" id="balance" > 10$</label> 
                    </div>

                    <form action="#" class="form-horizontal">

                    <fieldset>


                        <div class="form-group">


                        </div>  



                        <div class="form-group">
                                <label class="control-label col-md-4 col-xs-4" for="merchantID" > Merchant ID: </label>

                                <div class="col-md-4 col-xs-4">
                                <input type="text" class="form-control" id="merchantID" autofocus/>
                                </div>

                        </div>  

                        <div class="form-group">
                                <label class="control-label col-md-4 col-xs-4" for="amountID" > Amount:</label>

                                <div class="col-md-4 col-xs-4">
                                <input type="text" class="form-control" id="amountID" autofocus/>
                                </div>

                        </div>  

                        <div class="form-group">


                                <div class="col-md-8 col-md-offset-4 col-xs-8 col-xs-offset-4">
                                <button class="btn btn-primary" onclick="payment()"  > Submit </button>
                                </div>

                        </div>  


                    </fieldset>
                    </form>

Answer 1

Just a silly mistake. 只是一个愚蠢的错误。 Change the following line: 更改以下行：

<button class="btn btn-primary" onclick="payment()"  > Submit </button>

to like below: 喜欢下面：

<button type="button" class="btn btn-primary" onclick="payment()"  > Submit </button>

Which means you have to explicitly mention the type of the button. 这意味着您必须明确提及按钮的类型。 Because, in HTML5 button has a default behavior of submit. 因为，HTML5中的按钮具有默认的提交行为。 So, without this declaration, the form was being submitted and your page was being reloaded. 因此，如果没有此声明，则将提交表单，并重新加载您的页面。

Answer 2

The problem you are having as that clicking a button in a form causes the page to submit. 您遇到的问题是，单击表单中的按钮会导致页面提交。 When this happens your browser will attempt to send the form data to the server. 发生这种情况时，浏览器将尝试将表单数据发送到服务器。 Because you haven't set a target attribute to your form that means it basically just refreshes the page. 因为您尚未为表单设置目标属性，这意味着它基本上只是刷新页面。 You just need to prevent the submit action in your javascript. 您只需要阻止JavaScript中的Submit操作即可。

function payment(e) {

  var amount = document.getElementById("amountID");
  var merchant = document.getElementById("merchantID");

  output = output - amount.value;
  amount.value = " ";

  var balance = document.getElementById("balance");
  balance.innerHTML = output;
  e.preventDefault(); //add
  return false; //add
}

变量值：原型

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-03-28 03:44:49

解决方案2
0 2017-03-28 03:46:34

变量值：原型

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-03-28 03:44:49

解决方案2 0 2017-03-28 03:46:34

解决方案1
0 已采纳 2017-03-28 03:44:49

解决方案2
0 2017-03-28 03:46:34