Author: John Au-Yeung

Sometimes, we want to format a moment.js date as a 24-hour date-time.

In this article, we’ll look at how to format a moment.js date as a 24-hour date-time.

Use the HH Formatting Tag

We can use the HH formatting tag to format the hour into 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")  
console.log(date)

Then we get:

'13:15:00'

as a result.

Use the H Formatting Tag

Alternatively, we can use the H formatting tag to format the hour to 24-hour format.

For instance, we can write:

const date = moment("01:15:00 PM", "h:mm:ss A").format("H:mm:ss")  
console.log(date)

Then we also get:

'13:15:00'

as a result.

Conclusion

We can use the H or HH formatting tag to format the hour of a date-time as a 24-hour format time.

Oftentimes, we want to unpack JavaScript array entries into their own variables.

In this article, we’ll take a look at how to unpack a JavaScript array into separate variables with JavaScript.

Use the Destructuring Syntax

We should use the JavaScript array destructuring syntax to unpack JavaScript array entries into their own variables.

For instance, we can write:

const [x, y] = ['foo', 'bar'];
console.log(x);
console.log(y);

Then we assign 'foo' to x and 'bar' to y .

So x is 'foo' and y is 'bar' .

We can assign an array directly to variables on the left side.

For instance, we can write:

const arr = ['one', 'two'];
const [one, two] = arr;

We assign 'one' to one and 'two' to two .

Also, we can set a default value in case a value isn’t assigned to the variable.

To do this, we write something like:

const [one = 'one', two = 'two', three = 'three'] = [1, 2];
console.log(one);
console.log(two);
console.log(three);

We assign default values to one , two and three with the assignment statements on the left side.

So one is 1, two is 2, and three is 'three' .

three is 'three' since there’s no array entry assigned to it.

Conclusion

We can unpack JavaScript array entries into their own variables easily by using the destructuring syntax.

Sometimes, we may run into the “document.getElementByClass is not a function” error in the console when we run our JavaScript code.

In this article, we’ll look at how to fix the “document.getElementByClass is not a function” error in our JavaScript code.

The Correct Method Name is document.getElementByClassName

The correct method name for the method that we use to get the elements with a given class name is the document.getElementByClassName method.

For instance, if we have the following HTML:

<div class='text'>
  foo
</div>
<div class='text'>
  bar
</div>
<p>
  baz
</p>

Then we can get all the elements with the class attribute set to text by writing:

const texts = document.getElementsByClassName("text");
console.log(texts)

We call document.getElementsByClassName with the class attribute value for the elements we want to select.

Therefore texts is an HTMLCollection object with the divs with the class text in it.

Conclusion

To get all the elements with the given class attribute value, we use the document.getElementsByClassName method.

There is not document.getElementsByClass method in the browser.

This will stop us from running into the run into the “document.getElementByClass is not a function” error when we run our JavaScript code.

Sometimes, we’ve to check variable equality against a list of values in JavaScript.

In this article, we’ll look at how to check variable equality against a list of values in JavaScript.

Use the Array.prototype.indexOf Method

We can use the JavaScript array’s indexOf method to check if a value is included in the list of values in the array.

For instance, we can write:

let foo;
//...
if ([1, 3, 12].indexOf(foo) > -1) {
  //...
}

We have the foo variable and we check if foo is 1, 3 or 12 by putting those values in an array and then call the indexOf method of the array with foo .

Then if it returns a number bigger than -1, we know foo is one of the values listed in the array.

Use the Array.prototype.includes Method

Another array method we can use to check if a variable is one of the values in a list is to use the includes method.

For instance, we can write:

let foo;
//...
if ([1, 3, 12].includes(foo)) {
  //...
}

We call includes the way we call indexOf .

If includes returns true , then we know foo is one of the values in the array.

Conclusion

We can put the list of values we want to check in an array and then use the includes or indexOf method to check if the variable is in the array.

Sometimes, we want to detect scroll direction with JavaScript.

In this article, we’ll look at how to detect scroll direction with JavaScript.

Listen to the scroll Event

We can listen to the scroll event of window to check the scroll direction.

For instance, we can write:

window.onscroll = function(e) {
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}

to set a scroll event listener to the window.onscroll property.

Then we get the scrollY value and check if it’s bigger than the oldScroll value.

If it’s bigger, that means we’re scrolling down.

Then we set the scrollY value to the oldScroll property so that we can keep the old scroll value.

Both values are in pixels so we can compare them directly.

Listen to the scroll Event and Track the pageYOffset Property

We can also use the pageYOffset property to track the location that we’ve scrolled to vertically.

For instance, we can write:

let oldValue = 0
let newValue = 0
window.addEventListener('scroll', (e) => {
  newValue = window.pageYOffset;
  if (oldValue < newValue) {
    console.log("Up");
  } else if (oldValue > newValue) {
    console.log("Down");
  }
  oldValue = newValue;
});

to add a scroll listener to window with addEventListener .

Then we set newValue to window.pageYOffset .

If newValue is bigger than oldValue , then we scrolled up.

If newValue is smaller than oldValue , then we scrolled down.

In the end, we set newValue to oldValue so we can compare the 2.

Conclusion

We can detect scroll direction with the pageYOffset or the scrollY properties.