-3

I have been trying to add a wrap element to specific words on my website. I found a Jquery solution that seems to work really well.

Solution i followed: http://jsfiddle.net/trtcN/546/

I can get it all to work exactly how i would like it to work. When is start to bring it into my website things fall away..

Ive linked to my custom js file in my child theme using the following: (... replaces the full link)

<script src="...custom.js" type="text/javascript"></script>

and my custom file contains the following code:

var oldString = 'Choose a Start Date',
newString = 'Choose a <span class="date-style-change">Start</span> Date',
newText = $('span').text().replace(RegExp(oldString,"gi"),newString);

$('span').html(newText);

However when i refresh my page nothing has changed and there is a error in developer tools console which reads:

Uncaught TypeError: $ is not a function

Do i need to add some extra code to the js file that isn't on jsfiddle i was following?

Chris
  • 313
  • 1
  • 4
  • 21
  • `...jquery.js` its not valid path.use like this `../jquery.js` or show the folder structure – prasanth Jan 10 '18 at 12:00
  • Jquery,js is correctly reference, check the location of script src – Vinod kumar G Jan 10 '18 at 12:00
  • Try using `` – Ataur Rahman Munna Jan 10 '18 at 12:00
  • You need to import jQuery before your scripts that use it. Otherwise it should work. Also make sure your `jquery.js` is correctly loaded (You can see all downloaded files in the dev console and you should get an error if it can't find one) – SourceOverflow Jan 10 '18 at 12:00
  • You need to add jQuery. Go here: http://code.jquery.com/ click `minified` next to jQuery 3.X, then copy paste the script tag to your ``. As for your own script, don't call it jquery.js. And the path you put in `src` doesn't look valid. If it's in the same folder as the html, put the filename there, nothing else. –  Jan 10 '18 at 12:01
  • try in the browser console.it working or not? – zabusa Jan 10 '18 at 12:02
  • I'm wonder why people involve jQuery for such a simple thing – Belmin Bedak Jan 10 '18 at 12:02
  • ... is a replacement for a longer path, the path is correct. JQuery is already being used on the site. Seems as though the issue is with my script. – Chris Jan 10 '18 at 12:06
  • check if it's not conflicting with other libraries – Prateik Darji Jan 10 '18 at 12:08
  • @Chris Just use this: https://jsfiddle.net/khrismuc/cf2zwp30/ (no jQuery needed at all) My guess is you included jQuery after your script, but since you aren't showing us your actual code, it's impossible to tell. –  Jan 10 '18 at 12:10
  • I know it seems stupid way of doing it but the text is coming dynamically from woocommerce so in order to edit the actual code id have to change the plugin source i think. – Chris Jan 10 '18 at 12:16
  • 1
    @Chris well if it's WordPress, then use `jQuery` instead dollar sign `$` – Belmin Bedak Jan 10 '18 at 12:18
  • 1
    Possible duplicate of [$ is not a function - jQuery error](https://stackoverflow.com/questions/3931529/is-not-a-function-jquery-error) –  Jan 10 '18 at 12:20

1 Answers1

0

Your Jquery path is invalid. If your site can access to the cloud, just replace this script src;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

and you will figure out the problem.

lucky
  • 12,734
  • 4
  • 24
  • 46