CODEWITHSUNDEEP
javascript
Cam Smith
Cam Smith

Reputation: 69

Beginner JS, function not working

So I'm new to JavaScript - like a few days in "new," and I don't understand why this function that I'm calling isn't working.

I have this HTML page:

<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>

  <h1>Practice</h1>
  <button id="btn" onclick="printDate()">Print Date</button>
  <p id="Day"></p>
  <button onclick="printTime()"> Show Clock </btn>
  </br>
  <p id="Time"></p>
  <script src="Clock.js"></script>

</body>
</html>

And clock.js has the following:

// Defines Function

function printDate() {

// Grabs values from "Date" object using various methods

   var date = new Date();
   var day = date.getDay();
   var dateNum = date.getDate();
   var month = date.getMonth();
   var year = date.getYear();

// Corrects for JS year format

   year += 1900

// Switch "day" value with string containing name of day

   switch(day){

case 0: day = "Sunday"
break;
case 1: day = "Monday"
break;
case 2: day = "Tuesday"
break;
case 3: day = "Wednesday"
break;
case 4: day = "Thursday"
break;
case 5: day = "Friday"
break;
case 6: day = "Saturday"
break;
}

// Switch "month" value with string containing name of month

   switch(month){

case 0: month = "January"
break;
case 1: month = "February"
break;
case 2: month = "March"
break;
case 3: month = "April"
break;
case 4: month = "May"
break;
case 5: month = "June"
break;
case 6: month = "July"
break;
case 7: month = "August"
break;
case 8: month = "September"
break;
case 9: month = "October"
break;
case 10: month = "November"
break;
case 11: month = "December"
break;
}

// Prints values into p tag ID'd with "Day"

document.getElementById("Day").innerHTML = "Today is: "+day+" the "+dateNum+" of "+month+", "+year

}

function printTime() {

document.getElementById("Time").innerHTML = "Current Time"

}

Sorry for the comments, they're for my own learning purposes.

So to the issue - when I try to call printTime() in the HTML doc, it doesn't work, and doesn't replace the innerHTML with "Current Time" however, the other function works fine. What am I doing wrong here? Why does the first function work, but not the second?

Any help would be greatly appreciated!

Upvotes: 0

Views: 63

Answers (2)

Thomas
Thomas

Reputation: 12637

off topic: just a little refactoring of your script

var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function printDate() {
    // Grabs values from "Date" object using various methods
    var date = new Date();
    var dateNum = date.getDate();   
    var day = weekdays[date.getDay()];
    var month = months[date.getMonth()];
    var year = date.getFullYear();

    // Prints values into p tag ID'd with "Day"
    document.getElementById("Day").innerHTML = "Today is: "+day+" the "+dateNum+" of "+month+", "+year;
}

function printTime() {
    document.getElementById("Time").innerHTML = "Current Time"
}

Upvotes: 1

Goose
Goose

Reputation: 3279

You have an incorrect closing tag for that button. You have </btn> when it should be </button>.

Upvotes: 2

Related Questions