X-Cart forums - adding a javascript clock in a template

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - adding a javascript clock in a template (https://forum.x-cart.com/showthread.php?t=13959)

adding a javascript clock in a template

Hello,

I'm trying to add a javascript clock into the template: /customer/top_menu.tpl

This is the code:

Code:

<html>



<body>

<div align="center">

  <center>

  <table border="0">

    <tr>

      <td>

<script language="javascript">

<!--

document.write('<input onSelectstart="return false;" style="background-color: #000000; cursor: default; color: #00ff00; border: 3px ridge #CCFFCC; font-family: "times" system" value="Loading..." type="text" name="klokje" size="44" readonly>')

function geefdeklok()

// verander hierboven de kleuren van het klokje, alsmede de kleur van de omlijning, achtergrond



{

var klok = new Date()

var dagen = klok.getDate()

if(dagen<10)

dagen = "0" + dagen

var maanden = klok.getMonth() + 1

if(maanden<10)

maanden = "0" + maanden

var jaren = klok.getFullYear()

var uren = klok.getHours()

if(uren<10)

uren = "0" + uren

var minuten = klok.getMinutes()

if(minuten<10)

minuten = "0" + minuten

var seconden = klok.getSeconds()

if(seconden<10)

seconden = "0" + seconden

var detijd   = dagen+"-"+maanden+"-"+jaren+" en de tijd is "+uren+":"+minuten+":"+seconden;

klokje.value = "Vandaag is het " + detijd;

}

setInterval("geefdeklok()", 1000)

// -->

</script>

</td>

    </tr>

  </table>

  </center>

</div>



</body>



</html>

But I'm getting an error in the template.
What I'm doing wrong?

You need to put {literal} tags around the script:

{literal}insert javascript here {/literal}

Code:

{literal}

<script language="javascript"> 

<!-- 

document.write('<input onSelectstart="return false;" style="background-color: #000000; cursor: default; color: #00ff00; border: 3px ridge #CCFFCC; font-family: "times" system" value="Loading..." type="text" name="klokje" size="44" readonly>') 

function geefdeklok() 

// verander hierboven de kleuren van het klokje, alsmede de kleur van de omlijning, achtergrond 



{ 

var klok = new Date() 

var dagen = klok.getDate() 

if(dagen<10) 

dagen = "0" + dagen 

var maanden = klok.getMonth() + 1 

if(maanden<10) 

maanden = "0" + maanden 

var jaren = klok.getFullYear() 

var uren = klok.getHours() 

if(uren<10) 

uren = "0" + uren 

var minuten = klok.getMinutes() 

if(minuten<10) 

minuten = "0" + minuten 

var seconden = klok.getSeconds() 

if(seconden<10) 

seconden = "0" + seconden 

var detijd   = dagen+"-"+maanden+"-"+jaren+" en de tijd is "+uren+":"+minuten+":"+seconden; 

klokje.value = "Vandaag is het " + detijd; 

} 

setInterval("geefdeklok()", 1000) 

// --> 

</script>

{/literal}

I usually create a template (like time_js.tpl) as above.....then call that template as: {include file="time_js.tpl"} as below

Code:

<html> 



<body> 

<div align="center"> 

  <center> 

  <table border="0"> 

    <tr> 

      <td> 

{include file="time_js.tpl"}

</td> 

    </tr> 

  </table> 

  </center> 

</div> 



</body> 



</html>

Hope that helps....

Louise