错误 Wordpress jquery 表单错误说未引用的函数？答案

【问题标题】：Error Wordpress jquery form error saying unreferenced function?错误 Wordpress jquery 表单错误说未引用的函数？
【发布时间】：2018-09-06 05:03:21
【问题描述】：

我正在用 javascript 构建一个用于 wordpress 网站的 emi 计算器。问题是我在控制台中收到以下错误。 未捕获的 ReferenceError：未定义计算EMI 在 HTMLInputElement.onchange 我的代码如下

HTML

<table>
        <tr>
            <th>Outstanding Principle</th>
            <th>Interest Rate (%)</th>
            <th>Tenure </th>
            <th></th>
            <th>EMI</th>
        </tr>
        <tr>
            <td>
                <input type="text" id="outstanding_principle" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="text" id="interest_rate" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="radio" id="years" name="selection" value="years" onchange="calculateEMI(this);" /> Years
                <input type="radio" id="months" name="selection" value="Months" onchange="calculateEMI(this);" /> Months    
            </td>
            <td>
                <input type="text" id="tenure" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="text" readonly="true" id="emi">
            </td>
        </tr>
    </table>

我的 jquery 代码如下，请告诉我哪里错了。

<script>
        function calculateEMI(){
            var emi = 0;
            var P =0;
            var n = 1;
            var r = 0;

            if(jQuery("#outstanding_principle").val !== ""){
                P = parseFloat(jQuery("#outstanding_principle").val());
                if(jQuery("#interest_rate").val !== ""){
                    r = parseFloat(parseFloat(jQuery("#interest_rate").val()) / 100);
                }

                  if(jQuery("#tenure").val() !== ""){
                      n = parseFloat(parseFloat(jQuery("#tenure").val()));
                  }



            }
             if (P !== 0 && n !== 0 && r !== 0 && jQuery("#years").is(':checked')){
                 n = n * 12;
                 emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);


            jQuery("#emi").val(emi.toFixed(2));
             }else if(P !== 0 && n !== 0 && r !== 0 && jQuery("#months").is(':checked')){
                  emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);

                jQuery("#emi").val(emi.toFixed(2));
             }



        }

我正在使用页面构建器。另请注意，控制台还在顶部向我显示了这个。 JQMIGRATE：已安装 Migrate，版本 1.4.1

【问题讨论】：

我不确定将this 传递给您的函数是否有任何作用，因为您的函数没有参数。我可能弄错了，但我无法轻易找到任何证据。
什么时候抛出错误，在页面加载时还是之后？
我删除了这个，但它仍然显示相同的错误。页面加载后出现错误，当我尝试测试它是否有效时。我在计算器中输入了一些贷款价值和其他数据，但它失败了。
你在哪里添加了脚本？看起来该功能未定义（或根本不在页面中）。看到页面源码中的代码了吗？
我尝试使用名为页眉和页脚脚本的插件插入脚本。我在页脚脚本中添加了 jquery 代码。我想我需要使用 wp_enqueqe 函数来添加脚本。如果我找到答案，我会通知大家。

标签： javascript php jquery wordpress wordpress-theming

【解决方案1】：

您的代码运行良好。

function calculateEMI(){
            var emi = 0;
            var P =0;
            var n = 1;
            var r = 0;

            if(jQuery("#outstanding_principle").val !== ""){
                P = parseFloat(jQuery("#outstanding_principle").val());
                if(jQuery("#interest_rate").val !== ""){
                    r = parseFloat(parseFloat(jQuery("#interest_rate").val()) / 100);
                }

                  if(jQuery("#tenure").val() !== ""){
                      n = parseFloat(parseFloat(jQuery("#tenure").val()));
                  }



            }
             if (P !== 0 && n !== 0 && r !== 0 && jQuery("#years").is(':checked')){
                 n = n * 12;
                 emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);


            jQuery("#emi").val(emi.toFixed(2));
             }else if(P !== 0 && n !== 0 && r !== 0 && jQuery("#months").is(':checked')){
                  emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);

                jQuery("#emi").val(emi.toFixed(2));
             }



        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <tr>
            <th>Outstanding Principle</th>
            <th>Interest Rate (%)</th>
            <th>Tenure </th>
            <th></th>
            <th>EMI</th>
        </tr>
        <tr>
            <td>
                <input type="text" id="outstanding_principle" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="text" id="interest_rate" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="radio" id="years" name="selection" value="years" onchange="calculateEMI(this);" /> Years
                <input type="radio" id="months" name="selection" value="Months" onchange="calculateEMI(this);" /> Months    
            </td>
            <td>
                <input type="text" id="tenure" onchange="calculateEMI(this);">
            </td>
            <td>
                <input type="text" readonly="true" id="emi">
            </td>
        </tr>
    </table>

【讨论】：

我知道它可以正常工作，但它在我添加它的 wordpress 网站上不起作用。
您是在文档准备好之前调用 calculateEMI() 函数吗？

【解决方案2】：

注意代码有问题。
其他代码可能有错误。
使用开发者工具栏检查错误。
使用calculateEMI(); 而不是calculateEMI(this);

function calculateEMI() {
    var emi = 0;
    var P = 0;
    var n = 1;
    var r = 0;

    if ($("#outstanding_principle").val !== "") {
        P = parseFloat($("#outstanding_principle").val());
        if ($("#interest_rate").val !== "") {
            r = parseFloat(parseFloat($("#interest_rate").val()) / 100);
        }

        if ($("#tenure").val() !== "") {
            n = parseFloat(parseFloat($("#tenure").val()));
        }
    }
    if (P !== 0 && n !== 0 && r !== 0 && $("#years").is(':checked')) {
        n = n * 12;
        emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);


        $("#emi").val(emi.toFixed(2));
    } else if (P !== 0 && n !== 0 && r !== 0 && $("#months").is(':checked')) {
        emi = parseFloat((P * r / 12) * [Math.pow((1 + r / 12), n)] / [Math.pow((1 + r / 12), n) - 1]);

        $("#emi").val(emi.toFixed(2));
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
    <tr>
        <th>Outstanding Principle</th>
        <th>Interest Rate (%)</th>
        <th>Tenure Type</th>
        <th>Tenure</th>
        <th>EMI</th>
    </tr>
    <tr>
        <td>
            <input type="text" id="outstanding_principle" onchange="calculateEMI();">
        </td>
        <td>
            <input type="text" id="interest_rate" onchange="calculateEMI();">
        </td>
        <td>
            <input type="radio" id="years" name="selection" value="years" onchange="calculateEMI();" /> Years
            <input type="radio" id="months" name="selection" value="Months" onchange="calculateEMI();" /> Months
        </td>
        <td>
            <input type="text" id="tenure" onchange="calculateEMI();">
        </td>
        <td>
            <input type="text" readonly="true" id="emi">
        </td>
    </tr>
</table>

【讨论】：

【解决方案3】：

我尝试了您的代码，最初我遇到了与您相同的错误，但我注意到您没有关闭 script 标记。我关闭了 script 标签并尝试了错误消失的代码。

希望这对你也有帮助。

【讨论】：