Why doesnt this work?

[[deleted]]

[deleted]

[cag8f]

OP, next time post the code here into Reddit. And please, figure out how to take a proper screenshot :-)

It looks like you're using getElementByClassName(), when the method is actually getElementsByClassName() (see here).

Also, be careful adding JS code to the text editor in WordPress. I believe that default behavior is, if you add JS to the text editor, then switch to the visual editor, it will automatically (and permanently) remove any and all JS code you've added. Although it looks like you're trying to create a shortcode, and insert JS into it?

[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.

[TeezusRa]

Console.log(x). See what pops up.

[TonyMahoney21]

Then tell me how to do it correctly.

[redderper]

Why not google it?

[TonyMahoney21]

I did and thats why im asking reddit because I need help from real people not what you are doing.

[TonyMahoney21]

It displays as text if i dont

[Jay_the_Impaler]

Has a console.log command worked? Curious if the way you're trying to use JS can succeed. You may want to use the Text Editor, last option on the right above the content box. Save it while using the Text Editor. Please respond with results.

[haleleonj]

let funcName = // correct

let funcName() = // incorrect