How can I get my JavaScript to work on website? (Current code is working on Fiddle just not on website)

Question

I want to create a Character Counter for a Custom Field on a Product Page. I am trying to use the following JavaScript and HTML code to achieve such a function:

HTML:

<div class="fields-group-1">    

    <table class="fields_table  product-custom-text-wrapper" cellspacing="0">
        <tbody>
            <tr>
                <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
                <td class="value">
                <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no"  />
                    <span class="validation-message is-valid-1"></span>
                </td>
            </tr>
        </tbody>
    </table>


</div>

<span id="character_count"></span> //This is where I am attempting to output the Character Count.

JavaScript:

<script type="text/javascript"> 
$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#character_count').text(cs);
}
</script>

When running this within the Fiddle program, I can generate the Character Counter. However, when I place the above code into the website, the Character Counter does not seem to work. I have checked the Source Code and all of the coding is there.

I can see that someone else has experienced a similar issue to myself, as per th question at: Code works in fiddle, but not on webpage . As a newbie to JavaScript, I am not 100% sure of a suitable fix.

Is anyone able to point me in the right direction as to the relevant changes I would need to make in order for my above coding to work?

Answer 1

You can change your binding like below:

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

This binding does not require to be inside $( document ).ready(function() { function, because it will work for available DOM elements

You need to use document.ready for keyup event. Before this moment DOM elements you're referring in jQuery selectors aren't available.

 jQuery(document).on('keyup', '.product-custom-text', updateCount); jQuery(document).on('keydown', '.product-custom-text', updateCount); function updateCount() { var cs = $(this).val().length; jQuery('#character_count').text(cs); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fields-group-1"> <table class="fields_table product-custom-text-wrapper" cellspacing="0"> <tbody> <tr> <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td> <td class="value"> <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" /> <span class="validation-message is-valid-1"></span> </td> </tr> </tbody> </table> </div> <span id="character_count"></span> 

Edit: As per discussion, In wordpress sites, there might be chances of having $ confliction, so try using jQuery insted of $ . Updated answer!

Answer 2

You are using jQuery functions, but are you importing jQuery to use it in your site? Also, your function should be wrapped in a jQuery docready function.

$( document ).ready(function() {
    //your code
});

It works in the Fiddle, because jsFiddle includes jQuery for you. In your build you have to import it.

Answer 3

As you pointed out it's wordpress: no need to include the jquery source. WP enqueues it by default (though other plugins can remove that)

Wrap your jquery code inside $.ready.

For wordpress: it forces no-conflict mode, and therefor for all jquery code you must use jQuery instead of the $ alias, OR use the following as the $.ready wrapper: jQuery(function($){ // your code with $ stuff });