0

I'm trying to incorporate javascripts in my wordpress posts. I've previously done it by just adding it to the post in the wordpress editor, but I've heard the better way is to add it to a js directory in my theme folder and then make it accessible as explained here:

http://www.wpbeginner.com/wp-tutorials/how-to-move-javascripts-to-the-bottom-or-footer-in-wordpress/

I've gotten this to work such that an alert comes up when a button is pressed. But when I try to get an element by its id as follows, it can't be found: document.getElementById('InOrCm').value = "in";

Any suggestions?

Thanks, Sam

Update: turned out was an html error. Next step is to make the javascript on work on certain pages. I've been trying to do this with the below code, but crashes my wordpress, suggestions?

function wpb_adding_scripts() { is_page( 'javascript-testing-2-2' ) { wp_register_script('HeightComparisonTool', get_template_directory_uri() . '/js/HeightComparisonTool.js','','1.1', true); wp_enqueue_script('HeightComparisonTool'); } } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

0

I didn't get main part of your question. Still let me try:

document.getElementById('InOrCm').value = "in";

That mean you are adding value to the input with id "InOrCm". If I am getting you then your syntax is right. Double check your 'id' name. check with console output.

document.getElementById('InOrCm').value = "in";
console.log(document.getElementById('InOrCm').value);

Here is second part:

function wpb_adding_scripts() { 
       wp_register_script('HeightComparisonTool', get_template_directory_uri() . '/js/HeightComparisonTool.js','','1.1', true);
       if(is_page( 'javascript-testing-2-2' )) {
          wp_enqueue_script('HeightComparisonTool'); 
       } 
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
  • Thanks for responding, Rituparna. This is the error I get for the getglementbyid line: Uncaught TypeError: Cannot set property 'value' of null. It seems that when the javascript is in my theme/js folder, element ids aren't recognized. Whereas if the javascript is directly at the bottom of my wordpress post, it works fine. – MrSamuel Feb 6 '16 at 18:16
  • That means your html has no input text field with id "InOrCm". Can you share your html part which have the input field? Use wp_enqueue_script with in_footer argument true that will load your js in footer. Let me know if need more help – Rituparna sonowal Feb 6 '16 at 18:43
  • Here is the page I am testing on: tall.life/javascript-testing-2-2 – MrSamuel Feb 6 '16 at 19:15
  • js file is loading in footer which is okay. But where is your "InOrCm".. I didn't find that in your actual html but in the code block. what are you doing I didn't get.. why some random html are showing in your page?? – Rituparna sonowal Feb 6 '16 at 19:28
  • You got it! InOrCm was in this random html that wordpress wasn't seeing as html. I removed all the spaces and it sees it as html now. Why these are there is a long story... One other quick question, there is still one error coming up when that page loads, what do you think that might be due to? – MrSamuel Feb 6 '16 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.