Docs

[Ethan S]

I have never been able to get custom Javascript to work on my page. So I thought I’d try something pretty simple, I am using this fiddle to test how to do it.

So I went into “Appearance” – “Customize” – “Custom” – “Edit Global Javascript”

Then I pasted the Javascript code from the fiddle into the screen that came up and clicked “saved”

Next I created a new page which you can see here: http://www.alchemistscircle.com/javatest/

It’s nothing but the HTML from the fiddle above. Lastly I opened my style.css page and added the css which is working as the “1, 2, 3, 4” numbers are hidden as they should be.

But when I click on the links on the new page (http://www.alchemistscircle.com/javatest/) they don’t change anything on the page.

Is there something that must be changed for the custom javascript to work?

Thanks a lot for your help!

[Lely]

Hi Ethan,

I got this error from the console:

Uncaught TypeError: $ is not a function
www.alchemistscircle.com/:318 Uncaught TypeError: $ is not a function

Please update this custom code:

 $('[class^="question"]').on('click', function(e){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).show();
});   

To this:

jQuery(function($){
	$('[class^="question"]').on('click', function(e){
		e.preventDefault();
		var numb = this.className.replace('question', '');
		$('[id^="answer"]').hide();
		$('#answer' + numb).show();
	});   
});

From your x-child.js also update the following code:

$('#item1').click(function() {
  $('.frontbiglistcenter').html('.fl1');
});

$('#item2').click(function() {
  $('.frontbiglistcenter').html('fl2');
});

$('#item3').click(function() {
  $('.frontbiglistcenter').html('fl3');
});

$('#puppies').click(function() {
  $('#changing').html('Puppies');
});

$('#kittens').click(function() {
  $('#changing').html('Kittens');
});

$('#aardvark').click(function() {
  $('#changing').html('Aardvark');
});

To this:

jQuery(function($){

$('#item1').click(function() {
  $('.frontbiglistcenter').html('.fl1');
});

$('#item2').click(function() {
  $('.frontbiglistcenter').html('fl2');
});

$('#item3').click(function() {
  $('.frontbiglistcenter').html('fl3');
});

$('#puppies').click(function() {
  $('#changing').html('Puppies');
});

$('#kittens').click(function() {
  $('#changing').html('Kittens');
});

$('#aardvark').click(function() {
  $('#changing').html('Aardvark');
});

});

Hope this helps.

[Author]

Posts