変数の値：プロトタイプ

私は簡単なプロトタイプを持っています。支払いが行われるにつれ、Balanceの価値を更新し続けたいと思います。私はHTML、CSS、Javascript、Bootstrapを使って 'Balance'変数の値をどのように維持することができるかを質問したいと思います。 Submitをクリックすると、値は$ 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>

出典

2017-03-28 TimeToCodeTheRoad

ちょっとばかげたミス。以下好きに

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

：

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

を明示的にボタンの種類を言及しなければならないことを意味どの次の行を変更します。なぜなら、HTML5のボタンにはsubmitというデフォルトの動作があるからです。したがって、この宣言がなくても、フォームが送信されていて、ページがリロードされていました。

出典

2017-03-28 03:44:49

フォームのボタンをクリックすると、ページが送信されるという問題があります。これが起こると、ブラウザはフォームデータをサーバーに送信しようとします。フォームにターゲット属性を設定していないため、基本的にページを更新するだけです。あなたは、あなたの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 
}

出典

2017-03-28 03:46:34

変数の値：プロトタイプ

答えて

関連する問題