JS Code pen not working

JavaScript
1

Hi there,

I think I have written the correct code:

But nothing is displaying, finally?

2

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

3

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);
});
4

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

5

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

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

6

document.getElementsByClassName - useful information

coothead

7

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

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

image
image836Ă—600 38.2 KB

8

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
9

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.

10

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
11

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
12

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
13

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

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.