I'm trying to edit woocommerce settings page, everything works fine in a way, but for some reason if I load my custom js file on top of the template it doesn't load. Below is the template ...

If the script <script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script> is inserted at the bottom of the page as the last line works fine, but if it is placed at the top of the first lines it does not load, why is this happening?

<?php

?><link href="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.css" rel="stylesheet" type="text/css" ><?php

?><script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script><?php

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_edit_account_form' ); ?>

<form  action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

    <?php do_action( 'woocommerce_edit_account_form_start' ); ?>
    <div >
        <p >
            <label  for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span >*</span></label>
            <input type="text"  name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
        </p>
        <p >
            <label  for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?>&nbsp;<span >*</span></label>
            <input type="text"  name="account_last_name" id="account_last_name" autocomplete="family-name" value="<?php echo esc_attr( $user->last_name ); ?>" />
        </p>
    </div>
    <div ></div>

    <p >
        <label  for="account_user_login"><?php esc_html_e( 'Username', 'woocommerce' ); ?></label>
        <input type="text"  name="account_user_login" id="account_user_login" disabled value="<?php echo esc_attr( $user->user_login ); ?>" /> <span ><?php esc_html_e( "L'username viene scelto dall'utente al momento della registrazione, esso viene utilizzato insieme alla password per effettuare l'accesso al sito e non può essere modificato. Se la registrazione dell'account avviene tramite social login, l'username viene generato automaticamente. ", 'woocommerce' ); ?></span>
    </p>

    <p >
        <label  for="account_display_name"><?php esc_html_e( 'Display name', 'woocommerce' ); ?>&nbsp;<span >*</span></label>
        <input type="text"  name="account_display_name" id="account_display_name" value="<?php echo esc_attr( $user->display_name ); ?>" /> <span ><?php esc_html_e( 'This will be how your name will be displayed in the account section and in reviews', 'woocommerce' ); ?></span>
    </p>
    <div ></div>

    <p >
        <label  for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span >*</span></label>
        <input type="email"  name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
    </p>

    <!-- Password Section -->
    
      <div >Modifica Password<i ></i></div>
    <div >
          <fieldset>  
        <p >
               <label  for="password_current"><?php esc_html_e( 'Current password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
                <div >
                 <input type="password"  name="password" id="password_current" autocomplete="off"/>
                 <input type="checkbox"  id="pw_current" onclick="showPassword('password_current')"/>
                 <label for="pw_current" ></label>
                </div>
        </p>

            <p >
                <label  for="password_1"><?php esc_html_e( 'New password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
                <div >
                 <input type="password"  name="password_1" id="password_1" autocomplete="off" />
                 <input type="checkbox"  id="pw_1" onclick="showPassword('password_1')"/>
                 <label for="pw_1" ></label>
          </div>
        </p>

            <p >
              <label  for="password_2"><?php esc_html_e( 'Confirm new password', 'woocommerce' ); ?></label>
                  <div >
                   <input type="password"  name="password_2" id="password_2" autocomplete="off" />
                   <input type="checkbox"  id="pw_2" onclick="showPassword('password_2')"/>
                   <label for="pw_2" ></label>
          </div>
        </p>
      </fieldset>
    </div>
    <div ></div>

    <?php do_action( 'woocommerce_edit_account_form' ); ?>

    <p>
        <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
        <button type="submit"  name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
        <input type="hidden" name="action" value="save_account_details" />
    </p>

    <?php do_action( 'woocommerce_edit_account_form_end' ); ?>
</form>

<?php do_action( 'woocommerce_after_edit_account_form' ); ?>

<?php echo do_shortcode('[elementor-template id="22350"]'); ?>

CodePudding user response：

Try adding defer. It will ensure that the html elements are parsed BEFORE your script tries to act upon them. If the script runs before the page has loaded it won't accomplish what you're wanting.

Change this:

<script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script>

To this:

<script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js" defer></script>

Notice defer at the end of the second line.

Another option would be to encapsulate your code inside a function that only gets executed after page load:

function main()
{
  let p = document.getElementById("test");
  p.textContent = "The Page has Loaded";  
}
window.onload = main;

<p id="test">Page is NOT loaded yet!</p>