存储来自表单输入的数据并在页面刷新后重新加载 javascript 函数

Question

在我的带有 Woocommerce 插件的 Wordpress 中，我有一个带有三个输入计算器的侧边栏，我可以在其中获取我的输入值进行计算。

<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>

然后是提交按钮，我不想看到它。在 ID 为 #result 和 #result2 的两个 span 元素内，JS 函数应动态计算输入中的 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);

        };

    };

• 所以，计算器工作正常。但是对我来说有一个问题，存储数据。输入的默认值为“未定义”。我尝试使用 if/else 语句为空值和“未定义”值编写默认值，它有效，但在这种情况下，输入数据的存储停止工作。

我试过这段代码来修复 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();
            }

• 还有一个问题是我这几天遇到了麻烦。当我重新加载页面并且输入中的值保持不变时，输入 onkeyup 中的函数不会启动（逻辑上），因此 span 元素中的结果默认为“0”。我的问题是，如果有一些作弊，什么可以在没有 onkeyup 的情况下启动 onkeyup 功能？（我意识到这个问题听起来有点愚蠢：D）
• 当您向输入添加值，然后将一些产品添加到您的购物车时，会出现类似的问题。由于未启动的 onkeyup 功能，未计算值。

我意识到这个问题看起来我并没有试图解决这个问题，但相信我，我的编程技巧并不那么熟练，我已经花了几天时间来解决这个愚蠢的计算器。

Answer 1

2.使用文档。准备好 jquery 函数以在页面重新加载时设置/重置字段 -

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

3.尝试将事件处理程序onchange添加到购物车并从中调用calculate和calculate2。

编辑： 您必须注意，如果值是动态更改的（而不是通过用户输入），则不会调用 onchange。添加 onchange 处理程序后，您需要使用 JQuery 触发“更改”事件 -

$('#cart').trigger('change');

我不太明白第 1 点。