Author: John Au-Yeung

Sometimes, we want to split an array into two arrays based on odd/even position with JavaScript.

In this article, we’ll look at how to split an array into two arrays based on odd/even position with JavaScript.

How to split an array into two arrays based on odd/even position with JavaScript?

To split an array into two arrays based on odd/even position with JavaScript, we can use the array filter method.

For instance, we write:

const arr = [1, 1, 2, 2, 3, 8, 4, 6]
const aOdd = arr.filter((_, i) => i % 2 === 1)
const aEven = arr.filter((_, i) => i % 2 === 0)
console.log(aOdd)
console.log(aEven)

to call arr.filter with (_, i) => i % 2 === 1 to return all the arr elements with odd indexes.

Likewise, we call arr.filter with (_, i) => i % 2 === 0 to return all the arr elements with event indexes.

i is the index of the element in arr.

Therefore, aOdd is [1, 2, 8, 6] and aEven is [1, 2, 3, 4].

Conclusion

To split an array into two arrays based on odd/even position with JavaScript, we can use the array filter method.

Sometimes, we want to select nested element with class with JavaScript.

In this article, we’ll look at how to select nested element with class with JavaScript.

How to select nested element with class with JavaScript?

To select nested element with class with JavaScript, we can use the querySelector method.

For instance, we write:

<div class="cl1">
  <h1>Some heading</h1>
  <div class="sl-desc">Some description</div>
  <div class="sl-price">from only $10</div>
</div>

to add a div with nested divs.

Then we can select the div with class s1-price in the div with class cl1 by writing:

const el = document.querySelector(".cl1 .sl-price")
console.log(el.textContent)

We call document.querySelector with ".cl1 .sl-price" to do the selection.

And then we use the textContent property to get its text content.

Therefore, the console log logs "from only $10".

Conclusion

To select nested element with class with JavaScript, we can use the querySelector method.

Sometimes, we want to make a promise wait a couple of seconds before return with JavaScript.

In this article, we’ll look at how to make a promise wait a couple of seconds before return with JavaScript.

How to make a promise wait a couple of seconds before return with JavaScript?

To make a promise wait a couple of seconds before return with JavaScript, we can create a promise that pauses the code for a few seconds.

For instance, we write:

const wait = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

(async () => {
  console.log(1)
  await wait(2000)
  console.log(2)
})()

to define the wait function that calls setTimeout with resolve and the number of milliseconds to wait until resolve is called.

Then we can use it to pause our code before running the next line by calling wait with the delay in milliseconds.

Therefore, 2 is logged 2 seconds after 1 is logged.

Conclusion

To make a promise wait a couple of seconds before return with JavaScript, we can create a promise that pauses the code for a few seconds.

Sometimes, we want to sort an HTML list with JavaScript.

In this article, we’ll look at how to sort an HTML list with JavaScript.

How to sort an HTML list with JavaScript?

To sort an HTML list with JavaScript, we can convert select the li elements, convert the node list of li elements into an array, do the sorting, and then replace the ul content with replaceChildren.

For instance, we write:

<button>
  sort
</button>
<ul>
  <li>32</li>
  <li>170</li>
  <li>28</li>
</ul>

to add a button and a list.

Then we write:

const button = document.querySelector('button')
const ul = document.querySelector('ul')
const lis = document.querySelectorAll('li')
button.onclick = () => {
  const sortedLis = [...lis].sort((a, b) => +a.textContent - +b.textContent)
  ul.replaceChildren(...sortedLis)
}

to select the button and ul with querySelector.

And we select the li’s with querySelectorAll.

Next, we set button.onclick to a function to sort the li’s when the button is clicked.

To sort them, we spread the lis into an array.

Then we call sort with a callback that sort the textContent of each entry converted to numbers with +.

And then we replace the existing li entries in the ul with the sorted ones by calling ul.replaceChildren with the entries from sortedLis.

They’ll be inserted in the same order they’re listed in the arguments.

Therefore, once we click sort, we see:

28
32
170

displayed.

Conclusion

To sort an HTML list with JavaScript, we can convert select the li elements, convert the node list of li elements into an array, do the sorting, and then replace the ul content with replaceChildren.

Sometimes, we want to prevent reload with link onclick without "#".

In this article, we’ll look at how to prevent reload with link onclick without "#".

How to prevent reload with link onclick without "#"?

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.

For instance, we write:

<a href=''>click me</a>

to add a link.

Then we write:

const a = document.querySelector('a')
a.onclick = (e) => {
  e.preventDefault()
  console.log('clicked')
}

to select the link with querySelector.

Next, we set a.onclick to a function that calls e.preventDefault to stop the default behavior, which is to refresh the page.

Therefore, when we click on the link, we see 'clicked' logged.

Conclusion

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.