ストアデータとイムiは計算のための私のエントリの値を取得する三つの入力、の電卓でサイドバーを持つ、Woocommerceプラグインと私のWordpressでページ更新

Question

後のjavascript機能をリロードします。

<form method="get" id="calculator"> 

    <div class="row"> 

     <input value="0" type="text" id="val-x" name="val-x" onkeyup="calculate(this.value, document.getElementById('cart').value)"> 

    </div> 

    <div class="row"> 

     <input value="0" type="text" id="val-y" name="val-y" onkeyup="calculate2(this.value, document.getElementById('cart').value)"> 

    </div> 

    <div class="row"> 

     <input type="text" id="cart" readonly="readonly" value="<?php 
      $cart = WC()->cart->get_cart_total(); 
      $cart = strip_tags($cart); 

      echo mb_substr($cart, 0, -7); ?>"> 
    </div> 

次に、表示したくない送信ボタンがあります。 ids #resultと＃result2を持つ2つのスパン要素の中で、JS関数はinputのonkeyupイベントの結果を動的に計算する必要があります。

<div class="row"> 

      <input value="Calculate" type="submit" id="submit-btn" name="submit-btn" class="btn" onclick=""><!-- This submit button should be hidden all time! --> 

     </div> 

     <div><strong>Result </strong> <span id="result" style="color: red; font-size: 1.5em;">0</span></div> 

     <div><strong>Result 2 </strong> <span id="result2" style="color: red; font-size: 1.5em;">0</span></div> 


    </form> 

これらは、電卓がすべてで正常に動作し、私のjqueryの関数ので

jQuery(window).unload(saveSettings); 
    loadSettings(); 

    function loadSettings() { 
     var val_x = $('#val-x'); 
      val_y = $('#val-y'); 

     val_x.val(localStorage.val_xx); 
     val_y.val(localStorage.val_yy); 
    } 

    function saveSettings() { 
     localStorage.val_xx = val_x.val(); 
     localStorage.val_yy = val_y.val(); 
    } 

    var val_x,val_y,cart,result,result2; 
    function roundToTwo(num) {  
     return +(Math.round(num + "e+2") + "e-2"); 
    } 

    function finalCalc(){ 

     function calculate (val_x, cart) { 

      result = val_x - cart; 

      if(result<0){ 
       result = 0; 
      }else{ 
       result; 
      } 

      document.getElementById("result").innerHTML = roundToTwo(result); 

     }; 

     function calculate2 (val_y, cart) { 

      result2 = cart/val_y; 

      if(result2<0){ 
       result2 = 0; 
      }else{ 
       result2; 
      } 

      document.getElementById("result2").innerHTML = roundToTwo(result2); 

     }; 

    }; 

• です。しかし、私にとっては、データを保存することが問題です。入力のデフォルト値は "undefined"です。私はそれが働いたが、入力データの格納が、その場合には動作を停止し、ヌル値と「未定義」値のためのif/else文でデフォルト値を書き込もうとしました。

Iveはlocalstorageのデフォルト値を修正するためにこのコードを試しましたが、リフレッシュ後には入力値の保存値ではなく常に値 "0"を取得します。

if (localStorage.val_xx === null && localStorage.val_xx === "undefined") { 
       localStorage.val_xx.value = "0"; 
      } else if (localStorage.val_xx !== null && localStorage.val_xx !== "undefined"){ 
       localStorage.val_xx.value = val_x.val(); 
      } 

• 数日悩みを持つイムで別の問題をtheresの。私はページをリロードし、入力の値が同じに滞在すると、doesntの打ち上げ（論理的）onkeyupの入力で機能するので、スパン要素の結果は「0」がデフォルトです。同様の問題は、あなたが入力した値を追加したとき、発生し、その後あなたには、いくつかの追加
• ？：私の質問は、（D私はこの質問は少し愚かに聞こえる実現）、いくつかのチートがある場合、何がonkeyupのせずに機能をonkeyupの起動することができ、あります製品をショッピングカートに追加する値が計算されないのは、onkeyup関数が起動していないためです。

私はこの問題を解決しようとしましたが、私を信じて、プログラミングにイムそれほど習熟していないと私はすでにこの愚かな電卓を解決するために数日を過ごしていなかったように、この質問に見えることを実現します。

Answer 1

2.Useドキュメント。カートへのonchangeイベントハンドラを追加する

$(document).ready(function() { 
 
     calculate($('#val-x').val(), $('#cart').val()); 
 
     calculate2($('#val-y').val(), $('#cart').val()); 
 
    }

3.Tryをし、そこから計算してcalculate2を呼び出す - ページをリロード/リセットフィールドを設定するための準備ができてjqueryの機能。

EDIT： 値が動的に（ユーザー入力ではなく）変更された場合、onchangeは呼び出されないという事実に注意する必要があります。 1.