Category: JavaScript Answers

One way to iterate through elements returned by the document.getElementsByClassName method is to use the for-of loop.

For instance, if we have the following HTML:

<div class='slide'>
  foo
</div>
<div class='slide'>
  bar
</div>
<div class='slide'>
  baz
</div>

Then we can get all the elements with the class slide and loop through each item by writing:

const slides = document.getElementsByClassName("slide");
for (const slide of slides) {
  console.log(slide);
}

We call document.getElementsByClassName with 'slide' to return an HTML element collection object with all the divs.

Then we use the for-of loop to loop through each item.

slide has the div we’re looping through.

We can also spread the slides object into an array and then call forEach on it:

const slides = document.getElementsByClassName("slide");
[...slides].forEach(slide => {
  console.log(slide);
})

We check if a date has the MM/DD/YYYY format with JavaScript with the test method.

For instance, we can write:

const dateRegex = /^(0\[1-9]|1\[0-2\])\/(0\[1-9]|1\d|2\\d|3\[01])\/(19|20)\d{2}$/;
console.log(dateRegex.test('2021-10-01'))
console.log(dateRegex.test('10/01/2021'))

We have the dateRegex regex that checks if a string is in the MM/DD/YYYY format.

The pattern (0[1–9]|1[0–2]) checks if the first number is between 01 and 12.

The pattern (0[1–9]|1\d|2\d|3[01]) checks if the second number is between 01 and 31.

And (19|20)\d{2} checks if the 3rd number starts with 19 or 20 and ends with 2 digits.

\/ checks whether slashes are between the numbers.

Therefore, the first console log is false and the 2nd one logs true .

We can use the document.body.scrollHeight to get the full height of the content, including the content off the screen.

document.body.clientHeight has the height of the content on the screen.

Therefore, we can check if the page has a vertical scrollbar by comparing the 2.

To do this, we write:

const hasVScroll = document.body.scrollHeight > document.body.clientHeight;  
console.log(hasVScroll)

We can create a button that refreshes the page on click with JavaScript by listening to the click event that the button triggers.

For instance, we can write the following HTML:

<input type="button" value="Reload Page">

Then we can add a click listener to it by writing:

const input = document.querySelector('input')  
input.addEventListener('click', () => {  
  window.location.reload();  
})

We get the input with document.querySelector .

Then we call addEventListener with 'click' to add a click listener.

The callback runs when the button is clicked.

And we call window.location.reload to reload the page.

We can replace window.location.reload with history.go(0) , which will also reload the page.

To do that, we write:

const input = document.querySelector('input')  
input.addEventListener('click', () => {  
  history.go(0);  
})

to do the reloading.

We can use the Math.max and Math.min methods to get the max and min dates respectively.

For instance, we can write:

const dates = [];
dates.push(new Date("2011/06/25"))
dates.push(new Date("2011/06/26"))
dates.push(new Date("2011/06/27"))
dates.push(new Date("2011/06/28"))
const maxDate = new Date(Math.max(...dates));
const minDate = new Date(Math.min(...dates));
console.log(minDate)
console.log(maxDate)

to compute the maxDate and minDate , which are the max and min dates in the dates array respectively.

dates have multiple date objects.

We spread the dates array into Math.max and Math.min , which will convert the dates entries into UNIX timestamps, which are numbers.

The spread operator also spread the numbers as arguments of both methods.

Then we pass in the returned timestamp into the Date constructor to recreate them as dates.

Therefore minDate is:

'Sat Jun 25 2011 00:00:00 GMT-0700 (Pacific Daylight Time)'

And maxDate is:

'Tue Jun 28 2011 00:00:00 GMT-0700 (Pacific Daylight Time)'