Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem with simple JavaScript code

    This simple JavaScript code doesn't work for some reason. Please help

    I get this error this code line:
    Code:
        document.getElementById(idTime1).innerHTML = 'sfs';
    Error: Unhandled exception at line 3, column 5 in http://localhost:58608/js1.js
    0x800a138f - JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference




    Html (relevant codes):
    the body onload:
    Code:
    <body onclick="timeAndGreeting('timeTxt', 'greetingTxt')">
    the relevant p tags:
    Code:
    <p id="timeTxt"> iii</p>
        <p id="greetingTxt"> jjj</p>
    Java Script:

    Code:
    function timeAndGreeting(idTime1, idGreeting1)
    {
        document.getElementById(idTime1).innerHTML = 'sfs';
    
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today .getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById(idTime1).innerHTML = h + ":" + m + ":" + s;
        var t = setTimeout(timeAndGreeting, 500);
    
    
        // Greetings
    
        if (h < 12)
        {
            document.getElementById(idGreeting1).innerHTML = "<b>Good morning!</b>";
        }
        if (h > 12)
        {
            document.getElementById(idGreeting1).innerHTML = "<b>Good afternoon!</b>";
        }
        if (h == 12)
        {
            document.getElementById(idGreeting1).innerHTML = "<b>Good Noon!</b>";
        }
    
    }
    
    function checkTime(i) {
        if (i < 10) { i = "0" + i };  // add zero in front of numbers < 10
        return i;
    }

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,283
    Thanks
    1
    Thanked 558 Times in 544 Posts
    Hi there DanS,

    and a warm welcome to these forums.

    Here is a one possible solution...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Time and Welcome</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    html, body {
        height: 100%;
        margin: 0;
     }
    
    body {
        padding: 0.5em;
        box-sizing: border-box;
        background-color: #f0f0f0;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    
    #timeTxt, #greetingTxt {
        display: block;
        width: 11em;
        padding: 0.4em 0;
        margin: 0.75em auto;
        border: 0.062em solid #999;
        border-radius: 0.75em;
        box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
        background-color: #fff;
        font-family: verdana;
        font-size: 1em;
        color: #000;
        text-align: center;
     }
     
    #greetingTxt {
        font-weight: bold;
     }
    </style>
    
    </head>
    <body> 
    
     <form id="time">
      <input type="text" id="timeTxt" value="00:00:00" disabled>
      <input type="text" id="greetingTxt" value="click body" disabled>
     </form>
    
    <script>
    (function( d ) {
       'use strict';
       d.getElementById( 'time' ).reset();
       d.body.addEventListener('click', function(){
          setInterval( timeAndGreeting, 1000 )
        }, false );
    
    function timeAndGreeting() {
       var el = d.getElementById( 'greetingTxt' ),
           today = new Date(),
           h = today.getHours(),
           m = today.getMinutes(),
           s = today .getSeconds();
    
           h = checkTime( h );
           m = checkTime( m );
           s = checkTime( s );
    
           d.getElementById( 'timeTxt' ).value =  h + ':' + m + ':' + s;
       
        // Greetings
    
        if ( h < 12 ) {
             el.value = 'Good morning!';
          }
    
        if ( h == 12 && m == 0 ) {
            el.value = 'Good Noon!';
          }
    
        if ( h >= 12 && m > 0 ) {
             el.value = 'Good afternoon!';
          }
      }
    
        // add zero in front of numbers < 10
    
    function checkTime(i) {
        if ( i < 10) { 
             i = '0' + i 
            }
             return i;
      }
    
    }( document ));
    </script>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •