Question

我正在使用WrodPress 4.0.1。我在HTML网页中有一个简单的表单。在表单之后，我有一个带有onclick事件处理程序的按钮，当按下该按钮时，该处理程序调用一个函数来访问该表单。我希望由onclick事件触发的函数位于名为group-membership-cost.js的外部javascript文件中。外部JavaScript文件中的函数称为groupMembershipCost()。我的问题是：当单击按钮时，我不知道如何让onclick事件处理程序调用groupMembershipCost（），它位于group-membership-cost.js中。我尝试使用<button onclick="groupMembershipCost()">但是当我查看我的Firebug控制台时，我得到了ReferenceError: groupMembershipCost is not defined。

这是HTML表单

<form id="group_membership">
6 - 9 members: <input name="6_9" type="text" /> x $35 per member
10 - 14 members: <input name="10_14" type="text" /> x $30 per member
15 - 19 members: <input name="15_19" type="text" /> x $25 per member</form>
<button onclick="groupMembershipCost()">Calculate total for Group Membership</button>

Total: <span id="total">0</span>

我已使用以下代码

将functions.php中的函数排入队列

function group_membership_cost() {
    wp_enqueue_script( 'group-membership', get_template_directory_uri() . '/javascript/group-membership-cost.js', array(), '1.0', false );
}

add_action( 'wp_enqueue_scripts', 'group_membership_cost' );

脚本正确排队，因为当我查看页面的HTML源代码时，我看到了

<script type='text/javascript' src='http://mywebsite.com/wp-content/themes/myTheme/javascript/group-membership-cost.js?ver=1.0'></script>

以下是group-membership-cost.js

的代码

function groupMembershipCost() {

var output = document.getElementById("total");

var group1 = document.getElementsByName("6_9")[0].value;

var group2 = document.getElementsByName("10_14")[0].value;

var group3 = document.getElementsByName("15_19")[0].value;


if (group1 != '' && parseInt(group1) != NaN) {
    if (parseInt(group1) < 6) {
        output.innerHTML = "The number of group members in this category must be greater than 5."; 
    }
    else if (parseInt(group1) > 9) {
        output.innerHTML = "The number of group members in this category must be less than 10.";
    }
    else {
        output.innerHTML = parseInt(group1) * 35;
    }
}

else if (group2 != '' && parseInt(group2) != NaN) {
     if (parseInt(group2) < 10) {
        output.innerHTML = "The number of group members in this category must be greater than 9."; 
    }
     else if (parseInt(group2) > 14) {
        output.innerHTML = "The number of group members in this category must be less than 15.";
    }
    else {
        output.innerHTML = parseInt(group2) * 30;
    }
}


else if (group3 != '' && parseInt(group3) != NaN) {
    if (parseInt(group3) < 15) {
        output.innerHTML = "The number of group members in this category must be greater than 14."; 
    }
    else if (parseInt(group3) > 19) {
        output.innerHTML = "The number of group members in this category must be less than 20.";
    }
    else {
        output.innerHTML = parseInt(group3) * 25;
    }
}

else { output.innerHTML = "Please enter the number of people in your group into one of the three boxes above."; }

}

我无法弄清楚为什么网页无法访问groupMembershipCost()，如果它位于正确链接到该页面的.js文件中。如果使用WordPress的脚本排队功能将group-membership-cost.js文件正确链接到页面，是否可以使该JavaScript文件中的函数可用于HTML文档？

Answer 1

我加载了Wordpress 4.0.1并且无法重现该问题。此代码适用于Firefox v33和Chrome v39。

wp-screenshot

你是如何设置的？我做了以下事情：

将html放在页面的文本框中
将wp_enqueue_script函数放在
的最后
../的wordpress /可湿性粉剂内容/主题/的 yourTheme /functions.php

将脚本放入

../的wordpress /可湿性粉剂内容/主题/的 yourTheme /javascript/group-membership-cost.js

您是否在当前的Wordpress应用中使用主题 yourTheme ？

Answer 2

在Adrew说他无法重现这个问题之后，我确信我在大多数情况下都正确地编码了它。这促使我寻找＆＃34; duh＆＃34;错误。很抱歉浪费了你所有人的时间。如果有人关心，这就是问题......

我回去看了看网页，看了一下页面来源。在页面的源代码中，我点击了我脚本的超链接，然后打开了一个包含我脚本的JavaScript代码的编辑器。出于某种原因，我之前对我的脚本所做的更改并不存在。

以前，我在<script> </script>函数的开头和结尾都有group-membership-cost.js个标记，这些标记在我开始尝试在HTML文档中编写所有内联代码时遗留下来。但是当我将JavaScript代码放在.js文件中时，我删除了这些标记。出于某种原因，删除<script>标签的一个更改并没有保存，而且它自然会出错。

所以我只是使用WinSCP ftp到服务器，在WinSCP的文本编辑器中打开脚本文件，然后点击＆＃34; Reload＆＃34;工具栏中的图标。然后我努力刷新网页。现在它有效。

猜猜我什么都没学会，只是为了确保击中＆＃34; Reload＆＃34;在WinSCP的文本编辑器中虔诚地按钮抱歉浪费了所有人的时间。

onclick事件中的外部javascript函数

2 个答案: