samedi 29 novembre 2014

external javascript function in onclick event


I am using WrodPress 4.0.1. I have a simple form in a webpage in HTML. After the form, I have a button with an onclick event handler, which calls a function to access this form when the button is clicked. The function that I want to be fired by the onclick event is inside an external javascript file called group-membership-cost.js. The function inside the external JavaScript file is called groupMembershipCost(). My question is: I don't know how to get the onclick event handler to call groupMembershipCost(), which is inside group-membership-cost.js, when the button is clicked. I have tried using <button onclick="groupMembershipCost()"> but I get ReferenceError: groupMembershipCost is not defined, when I look in my Firebug console.


This is the HTML form



<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>


I have enqueued the function in functions.php using the following code



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' );


The script is correctly enqueued because when I look at HTML source for the page, I see



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


I can't figure out why the web page can't access groupmembershipCost(), if it is in a .js file that is correctly linked to the page. If the group-membership-cost.js file is correctly linked to the page using WordPress's script enqueueing function, doesn't that makes the functions within that JavaScript file available to the HTML document?





Aucun commentaire:

Enregistrer un commentaire