Wordpress embedded javascript on page doesn't work

Question

I'm trying to copy the following JSFiddle: https://jsfiddle.net/7nbr6/10/

Onto my WordPress site.

When I copy it onto the site it doesn't do anything when I click the buttons.

I am using this plugin to put the javascript onto my page: https://wordpress.org/plugins/css-javascript-toolbox/

HTML:

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200">
<div id="wrap">
<h2>Kelly calculator</h2>
    <div class="formStyles"> 
        <input id="probability" type="text" value="Probability"><br>
        <input id="odds" type="text" value="Odds"><br>
        <input id="balance" type="text" value="Balance"><br>
        <input id="submit" type="submit" value="Submit">
        <input id="reset" type="reset" value="Reset">
        <div id="result"></div>
    </div>
</div>

Javascript:

<script type="text/javascript">
jQuery('#submit').on('click', function() {
    var probability = jQuery('#probability').val();
    var odds = jQuery('#odds').val();
    var balance = jQuery('#balance').val();
    result = parseFloat(((probability/100)* (odds - 1) / (odds - 1) * odds - 1).toFixed(4)) * 0.95;
    var stake = ((balance / 100) * parseFloat((result * 100).toFixed(2)))
    jQuery('#result').text((result * 100).toFixed(2) + '% of' + balance + '€ which is ' +stake + '€');
});
</script>

The code is definitely embedded into the page header (visible by viewing the page source), but the buttons don't work.

I initially thought it was an issue with noConflict() detailed here: TypeError: $ is not a function when calling jQuery function

I also have this error in the editor (inside the plugin), but it doesn't appear in the console when I navigate to the page:

https://i.sstatic.net/C4Hxs.png

I tried removing the script tags, but then it would just put it into the header as text.

Thanks for your help

Andy · Accepted Answer · 2015-07-22 09:12:30Z

2

You're trying to attach a handler to an element before the DOM is ready. Wrapping the code inside a ready handler resolves this issue:

jQuery(function() {
    jQuery('#submit').on('click', function() {
        var probability = jQuery('#probability').val();
        var odds = jQuery('#odds').val();
        var balance = jQuery('#balance').val();
        result = parseFloat(((probability/100)* (odds - 1) / (odds - 1) * odds - 1).toFixed(4)) * 0.95;
        var stake = ((balance / 100) * parseFloat((result * 100).toFixed(2)))
        jQuery('#result').text((result * 100).toFixed(2) + '% of' + balance + '€ which is ' +stake + '€');
    });
});

The code wrapped around your JavaScript is shorthand for jQuery's .ready event.

answered Jul 22, 2015 at 9:12

Andy

5,1016 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

janderson Over a year ago

Nice, its working now. Do you know what is causing the script tag error? I still have that in the editor, although it is working now.

Andy Over a year ago

It's hard to say, it sounds like a bug in the plugin itself where it's expecting just JavaScript and not the <script> tags. Try contacting the developer of the plugin. Please could accept this answer if it answers your question.

3pic · Accepted Answer · 2015-07-22 09:17:36Z

1

when your code is loaded, jQuery is not ready. Therefore your code is quite ignored.

Put your code inside:

jQuery(function() {
/* your code here */
)};

answered Jul 22, 2015 at 9:17

3pic

1,22910 silver badges26 bronze badges

Collectives™ on Stack Overflow

Wordpress embedded javascript on page doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related