JS Code pen not working

Hi there,

I think I have written the correct code:

But nothing is displaying, finally?

It would help if you said what you expected it to do.

Dis play all this in output:

var output = document.getElementsByClassName("output");
var days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
function update() {
	var d = new Date();
	output.innerHTML = 'Year - '+d.getFullYear()+'<br>';
	output.innerHTML += 'Month - '+d.getMonth()+'<br>';
	output.innerHTML = 'Date(in month) - '+d.getDate()+'<br>';
	output.innerHTML = 'Day of Week - '+days[d.getDay()]+'<br>';
	output.innerHTML = 'Hour - '+d.getHours()+'<br>';
	output.innerHTML = 'Seconds - '+d.getSeconds()+'<br>'	
}
window.addEventListener("load",function(){
	setInterval(update,1000);
});

This…

var output = document.getElementsByClassName("output");

…should be…

var output = document.getElementsByClassName("output")[0];

…and these…

    output.innerHTML = 'Month - '+ d.getMonth()  +'<br>';
	output.innerHTML = 'Day of Week - '+days[d.getDay()]+'<br>';
	output.innerHTML = 'Hour - '+d.getHours()+'<br>';
	output.innerHTML = 'Seconds - '+d.getSeconds()+'<br>'	

…should be…

    output.innerHTML += 'Month - '+ (d.getMonth()+1)  +'<br>';
	output.innerHTML += 'Day of Week - '+days[d.getDay()]+'<br>';
	output.innerHTML += 'Hour - '+d.getHours()+'<br>';
	output.innerHTML += 'Seconds - '+d.getSeconds()+'<br>'	

https://codepen.io/coothead/pen/JjGyMJM

coothead

why was this not working? and why did this worked:

var output = document.getElementsByClassName("output")[0];

document.getElementsByClassName - useful information

coothead

This is pulling the first element →
var output = document.getElementsByClassName("output")[0];

But what is the logic of pulling the first element here?

The code that you provided in your pen
only had one element with the class=“output” attribute - hence the need for [0]

coothead

1 Like

I am trying to understand, but now I have done

<div class="output"></div>		
<div class="output"></div>		
<div class="output"></div>

More than 1 element now ↑
and using →

var output = document.getElementsByClassName("output");

But still it is not working.

How could that possibly work. :rolleyes:

Go back to the link in post #6 and carefully study it more carefully.

If you want to display the six date items in your javascript in six
separate div elements then do it like this - ( perhaps )…


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.6em  sans-serif;
 }
.output {
	max-width: 20em;
	padding: 1em;
	margin: 0.5em auto;
	border: 1px solid #999;
	background-color: #fff;
}    
</style>

</head>
<body>

<div class="output"></div>		
<div class="output"></div>		
<div class="output"></div>	
<div class="output"></div>		
<div class="output"></div>		
<div class="output"></div>	

<script>
(function(w, d ) {
   'use strict';

   var output = d.getElementsByClassName("output");

   var days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
   var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

function update() {
	var d = new Date();
	output[0].innerHTML = 'Year - '+ d.getFullYear();
	output[1].innerHTML = 'Month - '+ months[d.getMonth()];
	output[2].innerHTML = 'Date(in month) - '+ d.getDate();
	output[3].innerHTML = 'Day of Week - '+ days[d.getDay()];
	output[4].innerHTML = 'Hour - '+ d.getHours();
	output[5].innerHTML = 'Seconds - '+ d.getSeconds();	
}
w.addEventListener("load",function(){
	setInterval(update, 1000);
});

}( window, document ));
</script>

</body>
</html>

coothead

2 Likes

Using getElementsByClassName is a very old technique that has some issues with it.
I recommend that you use querySelector instead, so that the array index isn’t required either.

var output = document.querySelector(".output");
3 Likes

I should explain the difference between getElementsByClassName and querySelector.

getElementsByClassName gives you a live HTML collection, which is a list of matching elements that remains updated whenever the DOM changes. Not only is that a performance hit, but it can result in unexpected behaviour.

querySelector instead of giving a live HTML collection gives you a single element. The querySelector doesn’t just let you get elements by their class name, you can get identifier elements with # and you can also get normal elements too.

<form>
  <input type="number" class="currency" id="price">
</form>
var baz = document.querySelector("input");
var foo = document.querySelector(".currency");
var bar = document.querySelector("#price");

All three in this situation gives the same input element.

Because an element selector or class selector can match multiple elements. querySelector gives you the first matching element. If you want access to the other matching elements, you can use querySelectorAll instead which gives you a static nodeList, which not only ends up being more reliable than a live HTML collection, but you can use forEach on the nodeList to iterate through each of the matching elements.

var currencyInputs = document.querySelectorAll(".currency");
currencyFields.forEach(function (input) {
  // do stuff with each input
});

And you can also access the nodeList as if it were an array.

var currencyInputs = document.querySelectorAll(".currency");
console.log("Second currency input:", currencyInputs[1]);
2 Likes

Okay sir, Thanks. I will take care of this in future.