2 javascripts not working together

JavaScript
#1

I have in some pages the following javascript;

<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh) }
function display_ct() {
var strcount
var x = new Date()
var x1=x.toUTCString();
document.getElementById('ct').innerHTML = x1;
tt=display_c(); }
</script>

<script type="text/javascript">
function display_year() {
var x = new Date()
var y=x.getFullYear();
document.getElementById('year').innerHTML = y; }
</script>

</head>
<body>

coding…

</body>
</html>

<body onload=display_ct();>

The first javascript works but not the second when they are together. If I have the second one on its own it works OK but not when they are together.

Can anybody guide me to get them to work properly?

#2

Why don’t you combine the javascripts together inside one script tag?

#3

I tried deleting these 2 lines;


but it didn’t make any difference. Thanks for your input.

#4

I tried deleting the 2 lines;

<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh) }
function display_ct() {
var strcount
var x = new Date()
var x1=x.toUTCString();
document.getElementById('ct').innerHTML = x1;
tt=display_c(); }

function display_year() {
var x = new Date()
var y=x.getFullYear();
document.getElementById('year').innerHTML = y; }
</script>

but it didn’t make any difference. Thanks for your input.

#5

What are you expecting the above code to do that it is not? What errors are you seeing? How are these functions called? Do you have your full code (including html) online somewhere (preferably Codepen or something like it) so we can take a look?

#6

Both are displyed in the footer. The 1st one displays the International Time, and the 2nd one displays the year alongside the Copyright. Some pages don’t have the International Time and the Copyright Year works OK. I have checked both pages and found that I didn’t have the Copyright coding at the bottom like this;

<body onload=display_ct();>
<body onload=display_year();>

But it still does not work. If I put the Copyright coding at the top, the Copyright year works but the International time does not work. However, that identifies where the problem lies. I have tried combining the two like this;

<body onload=display_ct.year();>

And other modifications, but I can’t get them to work, so I need a Javascript expert. Thanks again for your input.

#7

Like I asked before, it would make it much easier for us to help you to see your entire code.

#8

OK, this is my entire code;

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh) }
function display_ct() {
var strcount
var x = new Date()
var x1=x.toUTCString();
document.getElementById('ct').innerHTML = x1;
tt=display_c(); }
</script>

<script type="text/javascript">
function display_year() {
var x = new Date()
var y=x.getFullYear();
document.getElementById('year').innerHTML = y; }
</script>

</head>
<body>

<style type="text/css"> .footer { position: absolute; height: 6mm; width: 100%; left: 0%; bottom: 0%; text-align: center; background-color: red; } </style>

<div class="footer"> <onload=display_year();> Copyright &copy <span id='year' ></span> ~ <?php echo WEBSITE_NAME; ?></div>

<style type="text/css"> .inttime { position: absolute; height: 4mm; width: 62mm; right: 2mm; bottom: 1mm; } </style>

<div class="inttime"> <span id='ct' ></span></div>

</body>
</html>

<body onload=display_ct();>
<body onload=display_year();>
#9

Typically, this is how you would write this code. You only need a single body opening tag.

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .footer {
      position: absolute;
      height: 6mm;
      width: 100%;
      left: 0%;
      bottom: 0%;
      text-align: center;
      background-color: red;
    }

    .inttime {
      position: absolute;
      height: 4mm;
      width: 62mm;
      right: 2mm;
      bottom: 1mm;
    }
  </style>

  <script type="text/javascript">
    function display_c() {
      var refresh = 1000; // Refresh rate in milli seconds
      mytime = setTimeout(display_ct, refresh)
    }

    function display_ct() {
      var strcount
      var x = new Date()
      var x1 = x.toUTCString();
      document.getElementById('ct').innerHTML = x1;
      tt = display_c();
    }

    function display_year() {
      var x = new Date()
      var y = x.getFullYear();
      document.getElementById('year').innerHTML = y;
    }
  </script>
</head>

<body onload="display_ct();display_year();">

  <div class="footer">Copyright &copy <span id='year'></span> ~
    <?php echo WEBSITE_NAME; ?>
  </div>

  <div class="inttime"> <span id='ct'></span></div>

</body>

</html>

I could be missing something, but when I use your original code or my rearranged code, I see something like the following. What are you seeing different or what should the code be displaying that it is currently not? Keep in mind, the website name will not show in the footer, because I am not running php locally.

image
image1276×917 9.25 KB

#10

Yes this code in single body is easier to understand.

#11

Thank you, everything works good now. I only needed to change the bottom line. I do prefer my method of coding CSS as its much easier to follow & I haven’t yet found a downside.

I now need an expert in BackEnd CodeIgniter, so I hope I can find someone here in FreeCodeCamp!

#12

The problem with writing it all in one line is that it is much more difficult for others to read. If you plan on working with other people at some point, you will need to get used to it written with indentation.

#13