Question

我有一个简单的原型。我希望在付款时不断更新Balance的价值。我想问一下如何使用HTML，CSS，Javascript和Bootstrap维护'Balance'变量的值。单击“提交”后，该值将返回到初始值$ 10。我试过用javascript做这个。简单的代码如下：

<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

只是一个愚蠢的错误。更改以下行：

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

喜欢以下内容：

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

这意味着你必须明确提到按钮的类型。因为，在HTML5按钮中有一个默认的提交行为。因此，如果没有此声明，表单将被提交并且您的页面正在重新加载。

Answer 2

您遇到的问题是单击表单中的按钮会导致页面提交。发生这种情况时，您的浏览器将尝试将表单数据发送到服务器。因为您没有为表单设置目标属性，这意味着它基本上只刷新页面。您只需要阻止javascript中的提交操作。

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 个答案: