Author: John Au-Yeung

To call multiple JavaScript functions in onclick event, we use addEventListener.

For instance, we write

const el = document.getElementById("id");

el.addEventListener("click", () => {
  alert("hello world");
});
el.addEventListener("click", () => {
  alert("another event");
});

to select the element with getElementById.

Then we call addEventListener to add a click listener to the element.

We call it twice with difference functions to add all the functions as click listeners.

So they’ll all be called when we click on the element.

To get the entire document HTML as a string with JavaScript, we use the innerHTML property.

For instance, we write

const markup = document.documentElement.innerHTML;
console.log(markup);

to get the htmlk element with document.documentElement.

Then we get the innerHTML property to the markup of its content as a string.

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.