我的Javascript在Wordpress中无法工作

Question

我为我之前编写的一个基本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>

Answer 1

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

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

向WordPress添加脚本和样式是一个相当简单的过程。

从本质上讲，您将创建一个将所有脚本和样式排入队列的函数。在将脚本或样式表排入队列时，WordPress会创建一个句柄和路径来查找您的文件及其可能具有的任何依赖项(如jQuery)，然后您将使用一个钩子来插入您的脚本和样式表。

Some instructions from the WordPress theme handbook

Answer 2

我认为内容是由WordPress kses过滤器转义的。Kses过滤器使输入的超文本标记语言安全。默认情况下，如果您没有unfiltered_html权限，则会启用Kses过滤器(默认情况下，如果站点不是多站点，则编辑者和管理员具有此权限。在multisite中，只有超级管理员具有该权限)。

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

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

Answer 3

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