Databases
StackOverflow2013
Postsdbo
POJavaScript two onload functions
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript two onload functions
    text
    copied!<p>I am quite new to JavaScript programming and I'm trying to create some scripts that would save me time in maintaining one of my websites.</p> <p>Now I have two functions in the same script that I'm calling from the head of my document and I'm trying to get them both to load at the same time with an onload event handler. I am doing that with window.onload command in my script (I want to make my script as unobtrusive as possible so I'm just calling the script in the header). The problem is that only the first function loads and the second one doesn't. Can both functions be called with:</p> <pre><code>window.onload=function(){ function1(); function2(); } </code></pre> <p>or is there a different code I need to use to accomplish this?</p> <p>I would really appreciate it if you could make your explanations as simple as possible as I am very new to JavaScript and programming in general.</p> <p>P.S. If more than one function can't be loaded with onload, could you please explain to me why this is the case so I know in the future.</p> <p>Ok, I see by the answers that my question probably left too much for assumption so here is the entire code of the functions I am trying to call (this is the script I am calling in the head of my html document):</p> <p>I was trying to avoid putting the code here because my variables are written in Serbian language (as I am from Serbia), but I hope that you will still be able to look through it without much confusion.</p> <p>In the code below I am calling at the bottom of the script two functions (lista() and ostale()) and the moveover() function is just a helper function called by the lista() function. In essence the first one (lista()) lists through all elements of div "boje" (in English translated to "colors") and depending on the color the user hovers their mouse over, the background image changes. It also adds a few attributes to those image elements that the user is supposed to hover over. The second one (ostale() (Translated to English "others") is supposed to only add attributes to the rest of the color images that are not supposed to do anything if the user hovers over them. But when I open the page in localhost it doesn't show in Firefox's inspect element that any attributes have been added to the images within the div "ostale".</p> <pre><code>function lista() { var boje = document.getElementById('boje'); var broj = boje.childNodes.length; for(i=1; i&lt;broj; i++) { var stavka = boje.childNodes.item(i); stavka.setAttribute("id", i); stavka.setAttribute("onmouseover", "moveover(src)"); stavka.setAttribute("alt", "Boja"); stavka.setAttribute("class", "boja"); stavka.hspace="2"; stavka.height="23"; } } function moveover(adresaBoje) { var izvor = adresaBoje; var slika = izvor.slice(0, izvor.length-4); var pocetak = "url("; var ekstenzija = ".jpg)"; var novaSlika = pocetak.concat(slika, ekstenzija); document.getElementById('slika').style.backgroundImage=novaSlika; } function ostalo(){ var ostaleboje = document.getElementById('ostale'); var ostalebroj = ostaleboje.childNodes.length; for(n=1; n&lt;ostalebroj; n++) { var ostalestavka = ostaleboje.childNodes.item(n); ostalestavka.setAttribute("alt", "Boja"); ostalestavka.hspace="2"; ostalestavka.height="23"; } } window.onload=function(){ try { lista(); ostalo(); } catch(err) { alert(err); } } </code></pre> <p>After I try to load the page it alerts me with an error: "TypeError: stavka.setAttribute is not a function".</p> <p>This is the html document I am trying to manipulate:</p> <pre><code>&lt;div id="slika" style="background-image: url(images/nova_brilliant/1.jpg)"&gt; &lt;/div&gt; &lt;div id="tekst"&gt; &lt;h1&gt;Nova Brilliant&lt;/h1&gt; &lt;div id="sadrzaj"&gt; &lt;p&gt;Pre&amp;#273;ite mi&amp;#353;em preko &amp;#382;eljene boje da biste videli kako izgleda ova kuhinja u toj boji:&lt;/p&gt; &lt;div id="boje"&gt; &lt;img src="images/nova_brilliant/1.gif"&gt;&lt;img src="images/nova_brilliant/2.gif"&gt;&lt;img src="images/nova_brilliant/3.gif"&gt; &lt;/div&gt; &lt;p&gt;Ostale dostupne boje:&lt;/p&gt; &lt;div id="ostale"&gt; &lt;img src="images/nova_brilliant/4.gif"&gt;&lt;img src="images/nova_brilliant/5.gif"&gt;&lt;img src="images/nova_brilliant/6.gif"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload