Wordpress - Why if I put the js script at the top of the page it doesn't load?

Question

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 class="form-container" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

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

    <p class="form-row">
        <label class="t2" for="account_user_login"><?php esc_html_e( 'Username', 'woocommerce' ); ?></label>
        <input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="<?php echo esc_attr( $user->user_login ); ?>" /> <span class="t4-light"><?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 class="form-row">
        <label class="t2" for="account_display_name"><?php esc_html_e( 'Display name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="field-settings" name="account_display_name" id="account_display_name" value="<?php echo esc_attr( $user->display_name ); ?>" /> <span class="t4-light"><?php esc_html_e( 'This will be how your name will be displayed in the account section and in reviews', 'woocommerce' ); ?></span>
    </p>
    <div class="clear"></div>

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

    <!-- Password Section -->
    
      <div class="drop_btn">Modifica Password<i class="icon_item fa fa-angle-down"></i></div>
    <div class="drop_container">
          <fieldset>  
        <p class="">
               <label class="t2" for="password_current"><?php esc_html_e( 'Current password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
                <div class="input-group">
                 <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
                 <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/>
                 <label for="pw_current" class="fa"></label>
                </div>
        </p>

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

            <p class="">
              <label class="t2" for="password_2"><?php esc_html_e( 'Confirm new password', 'woocommerce' ); ?></label>
                  <div class="input-group">
                   <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
                   <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/>
                   <label for="pw_2" class="fa"></label>
          </div>
        </p>
      </fieldset>
    </div>
    <div class="clear"></div>

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

    <p>
        <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
        <button type="submit" class="woocommerce-Button button" 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"]'); ?>

Answer 1

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>