[英]How do I link my onclick event to an external javascript function?
[英]external javascript function in onclick event
我正在使用WrodPress 4.0.1。 我在HTML网页中有一个简单的表单。 表单之后,我有一个带有onclick事件处理程序的按钮,当单击按钮时,该处理函数将调用一个函数来访问此表单。 我希望被onclick事件触发的函数位于一个名为group-membership-cost.js
的外部javascript文件中。 外部JavaScript文件中的函数称为groupMembershipCost()
。 我的问题是:单击按钮时,我不知道如何获取onclick事件处理程序来调用group-membership-cost.js内的groupMembershipCost()。 我尝试使用<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文档?
我加载了Wordpress 4.0.1,但无法重现该问题。 该代码在Firefox v33和Chrome v39中对我有效。
您如何设置? 我做了以下工作:
将wp_enqueue_script函数放在最后
../wordpress/wp-content/themes/ yourTheme /functions.php
将脚本放入
../wordpress/wp-content/themes/ yourTheme /javascript/group-membership-cost.js
您是否在当前的Wordpress应用中使用主题yourTheme ?
在Adrew说他无法重现该问题之后,我确信我在大多数情况下已经正确编码了。 那促使我寻找“ duh”错误。 很抱歉浪费您所有的时间。 如果有人在乎,这就是问题所在。
我回头查看了网页,并查看了页面源。 在页面的源代码中,我单击了脚本的超链接,它打开了一个包含脚本的JavaScript代码的编辑器。 由于某种原因,我之前对脚本所做的更改不存在。
以前,我在group-membership-cost.js
函数的开头和结尾处有<script> </script>
标记,这些标记是从我开始尝试在HTML文档中编写所有内联代码时剩下的。 但是,当我将JavaScript代码放在.js文件中时,我删除了这些标签。 出于某种原因,删除<script>
标记的一项更改没有保存,它自然使一切烦恼。
因此,我只是使用WinSCP ftp到服务器,在WinSCP的文本编辑器中打开了脚本文件,然后点击了工具栏中的“重新加载”图标。 然后,我硬刷新了网页。 现在可以了。
猜猜我什么也没学,只是确保认真点击WinSCP文本编辑器中的“重新加载”按钮。
很抱歉浪费大家的时间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.