importing javascript in functions.php not working

Question

I am fairly new to php so forgive the lack of knowledge.

Currently I am trying to add a small javascript file to a child theme. I have added the following code to the child's functions.php file.

 if ( is_page_template( 'page-templates/edit-profile.php' ) ) {

        function add_form_unlock() {
            wp_enqueue_script(
                'form_unlock',
                $get_stylesheet_directory_uri() . '/js/form_unlock.js',
                array( 'jquery'),
                '1.1',
                true
            );   
        }
        add_action( 'wp_enqueue_scripts', 'add_form_unlock' );
        }

My javascript is

var pass1 = "QuL7eD";

function check(){
   var pass2 = document.getElementById("password").value;
     if (pass1 == pass2) {
             document.getElementById("button").disabled = false;
             document.getElementById("test").disabled = false;

   }
} 

I have run the javascript in a test.html file with success so clearly it is just not running in the wordpress template.

Any help would be great!

Answer 1

Don't wrap WordPress Hooks/Filters inside of IF statements. The if statement is returning false because you aren't inside of the template when your functions.php file is evaluated.

The if statement should be inside of your add_form_unlock function, like this:

 function add_form_unlock() {
     if ( is_page_template( 'page-templates/edit-profile.php' ) ) { 
          wp_enqueue_script(
               'form_unlock',
               get_stylesheet_directory_uri() . '/js/form_unlock.js',
               array( 'jquery'),
               '1.1',
               true
         );   
      }
 }

add_action( 'wp_enqueue_scripts', 'add_form_unlock' );