Impossible to use JavaScript twice in a page

Question

I am the new administrator of a website I did not created (professionnals did, I'm just an IT student beginning with JavaScript). I wanted to add a timer on the homepage of the website with the following working code I founded on the Internet:

<script language="JavaScript1.2"> 
//##################################################
// Author: ricocheting.com 
// For: public release (freeware) 
// Date: 4/24/2003 (update: 6/26/2009) 
// Description: displays the amount of time until the "dateFuture" entered below. 


// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December 
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc 
// format: dateFuture = new Date(year,month-1,day,hour,min,sec) 
// example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm 

dateFuture = new Date(2014,10,25,20,00,00); 

// TESTING: comment out the line below to print out the "dateFuture" for testing purposes 
//document.write(dateFuture +"<br />"); 


//################################### 
//nothing beyond this point 
function GetCount(){ 

dateNow = new Date();   //grab current date 
amount = dateFuture.getTime() - dateNow.getTime();  //calc milliseconds between dates 
delete dateNow; 
adversaire = "Saastal";

// time is already past 
if(amount < 0){ 
document.getElementById('countbox').innerHTML="Le match Sion - " + adversaire + " a débuté !"; 
} 
// date is still good 
else{ 
days=0;hours=0;mins=0;secs=0;out=""; 

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs 

days=Math.floor(amount/86400);//days 
amount=amount%86400; 

hours=Math.floor(amount/3600);//hours 
amount=amount%3600; 

mins=Math.floor(amount/60);//minutes 
amount=amount%60; 

secs=Math.floor(amount);//seconds 

if(days != 0){out += days +" jour"+((days!=1)?"s":"")+", ";} 
if(days != 0 || hours != 0){out += hours +" heure"+((hours!=1)?"s":"")+", ";} 
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";} 
out += secs +" seconde"+((secs!=1)?"s":""); 
document.getElementById('countbox').innerHTML="Temps restant avant Sion - " + adversaire + " : " + out; 

setTimeout("GetCount()", 1000); 
} 
} 

window.onload=GetCount;//call when everything has loaded 

</script> 
<div id="countbox"></div>

The only problem is that when I add this code (which works), then another JavaScript code already on the page (scrolling text) doesn't work anymore. Here is the code of the scrolling text but what is important is that I founded it with "Right click/view page source" and I cannot change it, except for the text part (in the admin page, I have a textbox in which I write the text that is going to scroll and according to the following code, this text is just a variable part of the JavaScript function) :

<h3 class="replace">Agenda</h3>
<script language="JavaScript1.2">
    //  Distributed by http://www.hypergurl.com
    // Scrollers width here (in pixels)
    var scrollerwidth="180px";
    // Scrollers height here
    var scrollerheight="100px";
    // Scrollers speed here (larger is faster 1-10)
    var scrollerspeed=1;
    /* Scrollers content goes here! Keep all of the message on the same line!
     * var scrollercontent='<font face="Arial" color="green" size="5">
     * <b>Place your content here.<br> 
     * vous pouvez inclure des balises HTML, des hyperliens 
     * Script distributed by <a href="http://www.hypergurl.com">Hypergurl.com.</a> 
     * The scrolling massage will now pause on mouseover.<br>
     * Thanks David for the update!</b></font>'
     * le texte de la marquee doit être inclu dans une balise <div> ... </div>
     * ATTENTION: les aphostrophes doivent impérativement être échappés!!!!
     */
    var txt = ' '

+ '

HERE IS THE TEXT I CAN WRITE

' var scrollercontent = '' + txt + ''; var pauseit=1;

    // Change nothing below!

    scrollerspeed=(document.all)? scrollerspeed : Math.max(1, scrollerspeed-1) //slow speed down by 1 for NS
    var copyspeed=scrollerspeed
    var iedom=document.all||document.getElementById
    var actualheight=''
    var cross_scroller, ns_scroller
    var pausespeed=(pauseit==0)? copyspeed: 0

    function populate(){
    if (iedom){
    cross_scroller=document.getElementById? document.getElementById("iescroller") : document.all.iescroller
    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
    cross_scroller.innerHTML=scrollercontent
    actualheight=cross_scroller.offsetHeight
    }
    else if (document.layers){
    ns_scroller=document.ns_scroller.document.ns_scroller2
    ns_scroller.top=parseInt(scrollerheight)+8
    ns_scroller.document.write(scrollercontent)
    ns_scroller.document.close()
    actualheight=ns_scroller.document.height
    }
    lefttime=setInterval("scrollscroller()",50)
    }
    window.onload=populate

    function scrollscroller(){

    if (iedom){
    if (parseInt(cross_scroller.style.top)>(actualheight*(-1)+8))
    cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px"
    else
    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
    }
    else if (document.layers){
    if (ns_scroller.top>(actualheight*(-1)+8))
    ns_scroller.top-=copyspeed
    else
    ns_scroller.top=parseInt(scrollerheight)+8
    }
    }

    if (iedom||document.layers){
    with (document){
    if (iedom){
    write('<div style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=scrollerspeed">')
    write('<div id="iescroller" style="position:absolute;left:0px;top:0px;width:100%;">')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width='+scrollerwidth+' height='+scrollerheight+' name="ns_scroller">')
    write('<layer name="ns_scroller2" width='+scrollerwidth+' height='+scrollerheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=scrollerspeed"></layer>')
    write('</ilayer>')
    }
    }
    }

So my question is: do you know a way to let these two JavaScript functions work on the same page? I just want to have my timer either on the homepage, either in the scrolling text (which is also on the homepage, in the right column)...

Thank you in advance for you help.

Kinds regards, user3507737

score 2 · Answer 1 · edited May 23 '17 at 11:43

You assign an action to the window.onload event twice. In the first block of javascript you have window.onload=GetCount; and in the second you have window.onload=populate (which needs a semicolon at the end, by the way). You can only assign one function to the onload event, so it would be best to make a function that calls both GetCount and populate and assign this new function to your window.onload. See more in this answer.

score 2 · Accepted Answer · answered Nov 19 '14 at 21:36

It looks like you're overwriting the first script's window.onload call by including the second script, which has its own .onload call.

I would remove the two lines that begin with window.onload from the scripts included above, and add a third <script> tag in your page that does the following:

window.onload = function () {
    GetCount();
    populate();
};

This should get both your scripts running.

score 1 · Answer 3 · answered Nov 19 '14 at 21:37

1

You need to remove the current code that binds to onload and replace it with something like:

window.onload = function () {
    populate();
    GetCount();
};

answered Nov 19 '14 at 21:37

Will Hitchcock

9
1

Impossible to use JavaScript twice in a page

3 Answers3