Category: JavaScript Answers

To fix HTML input file selection event not firing upon selecting the same file with JavaScript, we set the value of the file input to null when we click on the file input button.

For instance, we write

<input type="file" />

to add a file input.

Then we write

const [input] = document.getElementsByTagName("input");

input.onclick = (e) => {
  e.target.value = null;
};

input.onchange = (e) => {
  console.log(e.target.value);
};

to select the input with getElementsByTagName.

Then we set its onclick property to a function that clears the file input on click by setting e.target.value to null.

And we set its onchange property to a function that logs the selected file by logging e.target.value when any file is selected.

To print current year in a website with JavaScript, we call the date getFullYear method.

For instance, we write

<span id="copyright"> </span>
<script>
  document
    .getElementById("copyright")
    .appendChild(document.createTextNode(new Date().getFullYear()));
</script>

to add a span and a script tag.

In the script tag, we call getElementById to select the span.

And then we call appendChild to append the next node that we created with createTextNode to append it as the last child of the span.

We get the 4 digit year from the current date and time with getFullYear and use that as the content of the text node.

To scroll an HTML page to a given anchor with JavaScript, we set the location.hash property.

For instance, we write

const scrollTo = (hash) => {
  location.hash = "#" + hash;
};

to define the scrollTo function.

In it, we set location.hash to the selector for the ID for the element we want to scroll to.

To wait for the end of ‘resize’ event and only then perform an action with JavaScript, we set the window.onresize property to the resize event handler.

For instance, we write

window.onresize = () => {
  console.log("resized");
};

to set window.onresize to a function that’s called when we resize the tab or window.

To show the "Are you sure you want to navigate away from this page?" message when changes committed with JavaScript, we set the window.onbeforeunload property to a function that returns a truthy value.

For instance, we write

window.onbeforeunload = () => {
  return true;
};

to set window.onbeforeunload to a function that returns true to show the "Are you sure you want to navigate away from this page?" message before the tab or window is closed or navigation starts.