Javascript - Loading Multiple functions onLoad

javascript html css toggle onload

21,962

Solution 1

Do create an init function manually.

window.addEventListener("load", myInit, true); function myInit(){  // call your functions here.... };

By doing this you can call that set of functions anytime.

Solution 2

The better way to do it i believe is to call your functions inside window.load instead of the body as follows:

window.onload=function(){
toggleOnLoad();
toggleFunction();
}

21,962

Author by

MarkHughes88

Updated on December 30, 2021

Comments

MarkHughes88 over 2 years

I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.

However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.

Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.

Where am I going wrong here?

Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)

function toggleOnLoad() {
  document.getElementById('dropdown01').style.display = 'none';
}

function toggleFunction() {
  var dropDown = document.getElementById('dropdown01');
  var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
  var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";

  if (dropDown.style.display != 'none') {
    dropDown.style.display = 'none';
    document.getElementById('toggle-image').src = dropDownExpand;
  } else {
    dropDown.style.display = '';
    document.getElementById('toggle-image').src = dropDownCollapse;
  }

}

css: body {
  background-color: #cccccc;
  padding: 0;
  margin: 0;
}

.container {
  margin-left: 20%;
  margin-right: 20%;
  background-color: white;
  padding: 1em 3em 1em 3em;
}

.toggle-header {
  padding: 0.5em;
  background-color: #0067b1;
  overflow: auto;
}

#toggle {
  border: none;
  width: 300;
  height: 3em;
  background-color: #0067b1;
  outline: 0;
}

.button-container {
  float: right;
  margin-right: 0.5em;
  display: inline-block;
}

.dropdowns {
  padding: 2em;
  background-color: #eeeeee;
}

HTML & Javascript:

<body onLoad="toggleOnLoad(); toggleFunction()">
  <div class="container">
    <div class="toggle-header">
      <div class="button-container" title="">
        <button id="toggle" onClick="toggleFunction()">    
                  <img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
              </button>
      </div>
    </div>
    <div id="dropdown01" class="dropdowns">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
    </div>
  </div>
</body>

MarkHughes88 over 8 years

so do I just put this at the start of my <script></script> tags? or does it need to be loaded at the top of the page?
Life is good over 8 years

it's Javascript code so needs to be placed inside the <script> tags
MarkHughes88 over 8 years

brilliant, thanks! this worked! i had to change "Window" to "window" as it wasn't picking it up with the capital "W" but now it works fine. I had to move my variables out of the toggleFunction() function to make them global so that they would be picked up, but other than that your solution worked perfectly :)
Joel Davis almost 7 years

This method is ok, but can only be set once. The accepted answer can be set multiple times, thus if your working with external libraries you can isolate the load event.
a55 over 3 years

window.addEventListener("load",function(){ alert("loaded"); });
a55 over 3 years

window.addEventListener("load",()=>{ alert("ES6"); }); arrow functions