Author: John Au-Yeung

Sometimes, we want to run code after the page has loaded completely with JavaScript.

In this article, we’ll look at how to run code after the page has loaded completely with JavaScript.

How to run code after the page has loaded completely with JavaScript?

To run code after the page has loaded completely with JavaScript, we can run it in the window.onload method.

For instance, we write:

window.onload = () => {
  console.log('page loaded')
}

to set the window.onload property to a function that runs when the page is completely loaded.

Therefore, we see 'page loaded' logged when the page is loaded completely.

Conclusion

To run code after the page has loaded completely with JavaScript, we can run it in the window.onload method.

Sometimes, we want to percent encode strings with JavaScript.

In this article, we’ll look at how to percent encode strings with JavaScript.

How to percent encode strings with JavaScript?

To percent encode strings with JavaScript, we can use the escape function.

For instance, we write:

console.log(escape("Ω"))

And we see '%u03A9' logged.

Conclusion

To percent encode strings with JavaScript, we can use the escape function.

Sometimes, we want to get values from inputs and create an array with JavaScript.

In this article, we’ll look at how to get values from inputs and create an array with JavaScript.

How to get values from inputs and create an array with JavaScript?

To get values from inputs and create an array with JavaScript, we can get all the inputs and get each input’s value from the value property.

For instance, we write:

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type='submit'>
</form>

to add a form.

then we write:

const form = document.querySelector('form')
const input = document.querySelectorAll('input[type="text"]')
form.onsubmit = (e) => {
  e.preventDefault()
  const arr = [...input].map(i => i.value)
  console.log(arr)
}

to select the form with querySelector and select the text inputs with querySelectorAll.

Then we set the form.onsubmit property to a function that runs when the form is submitted.

In the function, we call e.preventDefault to prevent the default server side form submission behavior.

Then we get all the input values by spreading the inputs into an array and call map with a callback that returns the value property of each input.

As a result, when we submit the form with input values, we see them logged.

Conclusion

To get values from inputs and create an array with JavaScript, we can get all the inputs and get each input’s value from the value property.

Sometimes, we want to get height of the highest children element in JavaScript.

In this article, we’ll look at how to get height of the highest children element in JavaScript.

How to get height of the highest children element in JavaScript?

To get height of the highest children element in JavaScript, we can select all the elements with querySelectorAll.

Then we can use the clientHeight property to get the height of each element.

For instance, we write:

<div style='height: 200px'>
  foo
</div>
<div>
  bar
</div>
<div style='height: 300px'>
  ba
</div>

to add some divs.

Then we get the height of the tallest div with:

const [tallest] = [...document.querySelectorAll('div')]
.sort((a, b) => b.clientHeight - a.clientHeight)
console.log(tallest.clientHeight)

We select all the divs with querySelectorAll.

Then we spread them into an array.

Next, we call sort to sort the divs by their height in descending order.

We get the height with the clientHeight property.

Then we get the tallest div with destructuring.

Therefore, tallest.clientHeight is 300 pixels according to the log.

Conclusion

To get height of the highest children element in JavaScript, we can select all the elements with querySelectorAll.

Then we can use the clientHeight property to get the height of each element.

Sometimes, we want to trigger clicks automatically with jQuery.

In this article, we’ll look at how to trigger clicks automatically with jQuery.

How to trigger clicks automatically with jQuery?

To trigger clicks automatically with jQuery. we can call the click method.

For instance, we write:

<button>
  hello
</button>

to add a button.

Then we write:

const button = $('button')
button.on('click', () => console.log('clicked'))

$(document).ready(() => {
  $(button).click();
});

We select the button with $('button').

Then we call on with 'click' and a click event handler to add an event handler.

Then we call click on the button when the document is loaded.

Therefore, we see 'clicked' logged when the page loads.

Conclusion

To trigger clicks automatically with jQuery. we can call the click method.