Почему EventListener для 'load' работает снизу тела, а не сверху? - PullRequest
Новая
       35

Почему EventListener для 'load' работает снизу тела, а не сверху?

1 голос
/ 27 марта 2020

Мое событие загрузки должно вызывать функцию, которая присваивает начальные значения элементам формы.

И я действительно не понимаю, почему мой сценарий 'загрузки' EventListener работает внизу тела, а не сверху?

В конце концов, функция не вызывается, пока страница полностью загружается, так что, похоже, это не имеет значения.

Примечание: я поместил его в <body>, потому что раздел <head> предоставляется моим <%@ include> кодом. И положить его туда тоже не получилось.

Что я делаю не так?

Вот весь соответствующий код. У меня в основном есть одна страница index. HTML с рамкой, в которой открываются все остальные страницы. В этом примере есть сценарий загрузки EventListener в теле одной из этих дополнительных страниц.

index. HTML

<html>
  <head >
    ...LOADS ALL JS SCRIPTS    
  </head>
  <body id="body-outer-index" >
    <iframe id="iframe-outer-index" src="jsp-pages/level-1/pages/index.jsp">
    </iframe>
  </body>
</html>

index. jsp

<%@ include file='/jsp-pages/level-1/headers/beg.jsp'%>
  ... This include declares a var ('SH') that stores
  ... a reference to the index.HTML that has all the 
  ... JS Script Files
  ... Then is adds  
  |**<html>******************************************|
  |**    <head>                                    **|
  |**        ...                                   **|
  |**    </head>                                   **|
  |**    <body>                                    **|
  |*******<div class='content-block' style="100vh">**|

  |******* then index.jsp code begins ***************|
  |         <div>                                    |
  |           a 3-column css table used as the       | 
  |           header for all pages                   |
  |         </div>                                   |
  |                                                  |
  |    <script>  **FAILS** to call the function      |
  |      window.addEventListener('load', SH.fillForm("form1"), false);
  |    </script>                                     |
  |                                                  |    
  |         <form>                                   |
  |           <input>...                             |
  |           <select>...                            |
  |           ...                                    |
  |           <submit>...                            |
  |         </form>                                  |
  |                                                  |
  |    <script>  SUCCESSFULLY calls the function      !
  |      window.addEventListener('load', SH.fillForm("form1"), false);
  |    </script>                                     |
  |                                                  |
  |*******</div>*************************************|
      </body>
    <html>

Это запрашиваемый дополнительный код (и он работает при вызове). 

function fillForm (formNo) {
  if (formNo === "form1") {
    var formElements = getFormElements(formNo);  
    var len = Object.keys(formElements).length;
    for (i = 0; i < len; i++) {
      if(formElements[i].id === "selectmiddlesep" ) {
        formElements[i].value = "*space*";
      } else if (formElements[i].id === "selectlastsep" ) {
        formElements[i].value = "*space*";
      } else if (formElements[i].id === "1stmiddletype" ) {
          formElements[i].value = "*initial*";
      } else if (formElements[i].id === "2ndmiddletype" ) {
          formElements[i].value = "*none*";
      } else {
        formElements[i].value = formElements[i].id;
      }
    }
  } else {
    /*
     * there may be other pages for other forms someday, but not today.
     * so if this function is called with a select element that is not in 
     * form1 there is a serious code error
     */
    alert ("fillForm is not form1");
  }
}
...