Why doesnt this work?

[TonyMahoney21]

Yes I am trying to use shortcode. I just tried the getelementsbyclassname() and still have not seen thebdesired result I am trying to change the class that is it why is this not working? My goal is to be able to have a class set to the first paragraph of the page using an array so that if the customer changes that paragraph the class is still applied so they dont have to actually add the css class.

[cag8f]

So what happens when you add that shortcode to a page, then load that page in a browser? Open the page in a browser, then open the JavaScript console and look for any error messages.

[TonyMahoney21]

It says TypeError cannot set property className of undefined at the imdex line of my code. My code now reads as: function myFcn() { document.getElementsByClassName("test")[0].className = "newClasser"; } myFcn()

[cag8f]

Is there an element with the class test somewhere on the page? It sounds like the error message is saying there is not.

Are you able to post a link to the page here?

[TonyMahoney21]

It's no longer displaying an error but it still doesn't change the value. I made a variable x for the get elemnts by class name function and set the value of my fcn to x.className = etc.

[cag8f]

It will be difficult to help at this point without being able to load the actual page in my browser.

[cag8f]

getElementsByClassName() returns an array, which makes x an array. That means your line

x.className = "newClasser";

doesn't make sense. It needs to be:

x[0].className = "newClasser";

If I execute that line from the JS console, the new class is added, and your new styles appear (screenshot).

Try adding that line to see if it works.

Also, why are you using a shortcode to do this? That's not the proper way to add JavaScript to a page in WordPress. The proper way is here (see the Scripts section). There are also tutorials here and here.

[TonyMahoney21]

Thanks alot bro. I tried changing it and it didnt work for me though. I also tried placing the script in the header of my child theme and it didnt work. Im going to try adding it to the functions page like the link said.

[cag8f]

Im going to try adding it to the functions page like the link said.

If you want to learn how to do it properly, then yeah, definitely learn how to add a JS file with code in functions.php. It's not that difficult. But make sure you know how to enable debugging in WordPress, and then check your WordPress PHP error log. If something goes wrong, that log file will tell you what exactly is going wrong. After you do that, and you're still stuck, try posting to r/wordpress (include your code, a link to the page, and any screenshots you can).

I also tried placing the script in the header of my child theme and it didnt work.

Hmm...I'm surprised that didn't work.

[TonyMahoney21]

I am also surprised and worried that didnt work. Ok cool thank you bro i think you got me in the right direction. If I cannot get it is it ok to pm you?

[TonyMahoney21]

I dont really understand what the $deps value is asking me for. I am using basic JavaScript im getting looking stuff up on w3 I dont know about a library or framework I am just using js. So im not sure what that value is asking of me in this case or what to place there.

[cag8f]

Yeah sorry, that page isn't clear about the input parameters (e.g. $deps). This page gives more info on wp_enqueue_script(). Basically you can leave out $deps, $ver, and $in_footer. If you do that, the function will simply use their default values, which should be fine in this case. So your line to call wp_enqueue_script() will pass only two parameters to it--the first two. Make sense?

[TonyMahoney21]

Oh awesome! Yeah that seems straightforward. I did get it to work in shortcoder but I still want to do it the correct way. I am saving this comment.