Category: JavaScript

Sometimes, we want to disable scrolling on number inputs with JavaScript.

In this article, we’ll look at how to disable scrolling on number inputs with JavaScript.

How to disable scrolling on number inputs with JavaScript?

To disable scrolling on number inputs with JavaScript, we can listen to the wheel event.

For instance, we write

document.addEventListener("wheel", (event) => {
  if (document.activeElement.type === "number") {
    document.activeElement.blur();
  }
});

to get the active element with document.activeElement.

We get its type attribute and check if it’s 'number'.

And if it is, we call its blur method to move focus away from it to stop it from scrolling.

Conclusion

To disable scrolling on number inputs with JavaScript, we can listen to the wheel event.

Sometimes, we want to merge 2 arrays of objects with JavaScript.

In this article, we’ll look at how to merge 2 arrays of objects with JavaScript.

How to merge 2 arrays of objects with JavaScript?

To merge 2 arrays of objects with JavaScript, we can use the spread operator.

For instance, we write

const arr1 = new Array(
  { name: "lang", value: "German" },
  { name: "age", value: "33" }
);
const arr2 = new Array(
  { name: "childs", value: "5" },
  { name: "lang", value: "French" }
);
const arr3 = [...arr1, ...arr2];

to merge arr1 and arr2 into one array by spreading the entries of arr1 and arr2 into a new array.

And then we assign that to arr3.

Conclusion

To merge 2 arrays of objects with JavaScript, we can use the spread operator.

Sometimes, we want to auto-submit an upload form when a file is selected with JavaScript.

In this article, we’ll look at how to auto-submit an upload form when a file is selected with JavaScript.

How to auto-submit an upload form when a file is selected with JavaScript?

To auto-submit an upload form when a file is selected with JavaScript, we can listen for the change event triggered by the file input.

And we call the form’s submit method when the change event of the file input is emitted.

For instance, we write

<form action="http://example.com">
  <input type="file" />
</form>

to add the form with the file input.

Then we write

const form = document.querySelector("form");
const input = document.querySelector("input");
input.onchange = () => {
  form.submit();
};

to select the form and input with querySelector.

And we set the input.onchange property to a function that calls form.submit to submit the form when the file selection is changed.

Conclusion

To auto-submit an upload form when a file is selected with JavaScript, we can listen for the change event triggered by the file input.

And we call the form’s submit method when the change event of the file input is emitted.

Sometimes, we want to scroll back to the top of scrollable div with JavaScript.

In this article, we’ll look at how to scroll back to the top of scrollable div with JavaScript.

How to scroll back to the top of scrollable div with JavaScript?

To scroll back to the top of scrollable div with JavaScript, we can set the scrollTop property of the scrollable div to 0.

For instance, we write

const myDiv = document.getElementById("containerDiv");
//...
myDiv.scrollTop = 0;

to get the div with getElementById.

Then we set the scrollTop property of myDiv to 0 to scroll to the top of the scrollable div.

Conclusion

To scroll back to the top of scrollable div with JavaScript, we can set the scrollTop property of the scrollable div to 0.

Sometimes, we want to get child node index with JavaScript.

In this article, we’ll look at how to get child node index with JavaScript.

How to get child node index with JavaScript?

To get child node index with JavaScript, we can use the Array.from method.

For instance, we write

const index = Array.from(element.parentNode.children).indexOf(element);

to get the child nodes of element with element.parentNode.children.

Then we convert it to an array with Array.from.

Next, we call indexOf with element to get the index of element in the array.

Conclusion

To get child node index with JavaScript, we can use the Array.from method.