我的 Javascript 在 Wordpress 中不起作用答案

【问题标题】：My Javascript won't work in Wordpress我的 Javascript 在 Wordpress 中不起作用
【发布时间】：2017-09-29 10:41:46
【问题描述】：

我为不久前编写的基本 HTML/CSS 页面创建了一个脚本，它在标准网站中运行良好，但当我尝试将其导入客户的新 Wordpress 网站时，该脚本无法运行。

新网站：http://www.fencingfabrication.com.au/quote-calculator/

HTML

*<h1>S & N Fencing</h1>
        <h2>Get a fencing quote today</h2>
        <h4>Requires browser Javascript</h4>
        <h3>Gate dimenstions</h3>
        Wood Look 10% extra<input type="checkbox"  id="check1" value=false><br>
        <p>Length in mm</p><input id="a" type="text"/>
        <p>Width in mm</p><input id="b" type="text"/>
        <br><br><br>

        <input type="button" onclick="val()" value="Calculate Total"/>*


<script type="text/javascript"> 
    var a,b;    /*creates variables a and b*/

    var gatePrice = 500; /*price per square meter of fencing*/

    function setValues() /*assigns value of a and b using id*/
    {
        a = Number(document.getElementById("a").value); 
        b = Number(document.getElementById("b").value);

    }

    function check_tenpercent(checkbox) /*checks if check boxes are checked and adds assigns values to variable*/
    {
        var retval = 1;
        if(checkbox.checked == true)
        {
            retval = 1.1;
        }
        return retval;
    }

    function val()
    {
        setValues();
        var rate1 = check_tenpercent(document.getElementById("check1"));


        gateMeters = a*b / 1000000;

        gateMeters = gateMeters * rate1;

        gateMeters = gateMeters * gatePrice;


        result = gateMeters;
        if(result >= 700){
        alert("The total fencing price for this job is" + " $" + result.toFixed(2)); /*gives out total price of fencing*/
        }else {
            alert("This job would cost" + " $" + result.toFixed(2) + ". " + "Minimum price is $700");
        }
    }
</script>

【问题讨论】：

标签： javascript wordpress

【解决方案1】：

我认为内容被 WordPress kses 过滤器转义。 Kses 过滤器使输入 HTML 安全。如果您没有unfiltered_html 的能力，则默认启用Kses 过滤器（默认情况下，如果站点不是多站点，则编辑和管理员具有此权限。在多站点中，只有超级管理员具有该权限）。

WordPress 在输出中转义输入 HTML。您可以通过删除过滤器来停止转义 HTML，但这会使 WordPress 有点不安全。

您应该检查编辑屏幕中的内容，然后，您应该检查输出内容。

【讨论】：

【解决方案2】：

当我们点击 Calculate 按钮时，您的函数 val() 没有被调用。如果您检查该按钮，您将看到没有定义 onclick。

【讨论】：

【解决方案3】：

您需要通过将 CSS 和 JavaScript 文件加入到您的 functions.php 中来包含它们

当您创建主题时，您可能想要创建额外的样式表或 JavaScript 文件。但是，请记住 WordPress 网站不仅会激活您的主题，还会使用许多不同的插件。为了让一切和谐地运作，它是主题和插件使用加载脚本和样式表很重要标准的 WordPress 方法。这将确保网站保持不变高效且不存在不兼容问题。

向 WordPress 添加脚本和样式是一个相当简单的过程。
本质上，您将创建一个函数，将您的所有脚本和样式。将脚本或样式表排入队列时，WordPress 创建一个句柄和路径来查找您的文件及其任何依赖项可能有（如 jQuery），然后你将使用一个钩子来插入你的脚本和样式表。

Some instructions from the WordPress theme handbook

【讨论】：