'Paragraph innerhtml is not displaying the two clocks, I need assitance with it

I am trying to make a javascript code that displays the EST (USA time) and the Japan and I have done the entire process, however I am trying to place the time on a paragraph, I have put the ID and I have put the document.getelementbyid but I don't know why is it not displaying. Also I am open to use a library to improve the javascript to show two different times (EST and Japanese standard time) please help me with it

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../Assets/CSS/ACSS.css" id="css">
    <script src="../Assets/Jscript/code.js"></script>
    <script src="../Assets/Jscript/Currency.js"></script>
    <script src="../Assets/Jscript/cssChanger.js"></script>
    <script src="../Assets/Jscript/Timecito.js"></script>
    <title>Introduction</title>
</head>
<body>

<nav class="botones"> &nbsp; &nbsp; <a id="Here" href="../Intro/Introduction.html">Intro</a> &nbsp; &nbsp; <a  href="../FOOD/Comida.html">Food</a> &nbsp; &nbsp; <a href="../Culture/Culture.html">Festivities</a> &nbsp; &nbsp; <a href="../Geography/Geography.html"> Geography</a> &nbsp; &nbsp; <a href="../Sports/Sports.html"> Sports</a> &nbsp; &nbsp; <a href="../Language/Language.html"> Language</a> &nbsp; &nbsp;<a href="../Form(exercise03)/exercise03.html">exercise03</a>&nbsp; &nbsp;<a href="../References/References.html">References</a>&nbsp; &nbsp;<a href="../Rubric/Rubric.html">Rubric</a>&nbsp; &nbsp;<a href="../AboutMe/index.html">About me</a> <a href="../Comments/Server/Comments.php">Comments</a></nav>

<input type="button" a href="#" onclick="colorblind();">Inverted for colorblinds</a>
<input type="button" href="#" onclick="enableStylesheet();">Normal</a>

    <div class="content">
<h1 class="blue">Welcome to the world of Japan</h1>       
<div id="textBlock">
    <div id="pic">
      <figure>
      <img id="slideshow" src="../Assets/Images/main1Int.png" alt="World of Japan" title="Japan Introduction">
      
      </figure>
  </div>

<p> Firstly, you have to know that japan is actually for everyone, If you love histroy, then you have to know the history of Japan which is really fascinating, if you love Gastronomy, then you will love all the food Japan has to offer, and finally if you love technology, then you will see the State-of-the-art technology</p>
<div class="centrarlo">
    <img class="center" src="../Assets/Images/Sakura.jpg" alt="The cherry blossom" />
    <img src="../Assets/Images/Otraperreada (2).jpg" alt="Random pic">
    <img src="../Assets/Images/Weirdpic (1).jpg" alt="Blablah">
</div>


<p>After you have visited the entire website, you will find more reasons to visit the wonderful country of Japan</p>


</div>
<div class="centrarlo">
   <img  class="center" src="../Assets/Images/Gold.jpg" alt="The golden temple">
   <img src="../Assets/Images/weeee (1).jpg" alt="juji">
   <img src="../Assets/Images/Otrafotomas....quierodormiiir (2).jpg" alt="Otraf">
</div>


</div>


<h2> Currency</h2>
<input type="text" id="platica" name="platica" placeholder="Money Value"> 
<p>The money value is: <span id="currency"></span></p>
<input type="button" onclick="USDToYen()" value="USD to Yen"/>
<input type="button" onclick="YenToUSD()" value="yen to USD"/>

<h4>USA Time</h4>
<p id="USA"></p>






</body>
</html>

Javascript:

 
    function displayTime()
    {
        var offset = new Date().getTimezoneOffset();// getting offset to make time in gmt+0 zone (UTC) (for gmt+5 offset comes as -300 minutes)
    var date = new Date();
    date.setMinutes ( date.getMinutes() + offset);// date now in UTC time
            
    var easternTimeOffset = -240; //for dayLight saving, Eastern time become 4 hours behind UTC thats why its offset is -4x60 = -240 minutes. So when Day light is not active the offset will be -300
    var usatime = date.setMinutes ( date.getMinutes() + easternTimeOffset);
    TimeUSA = document.getElementById("USA").innerHTML=usatime;
    var japanTimeOffset = -780;
    

    }
displayTime();
javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions