Category: JavaScript

Sometimes, we want to find the parent element using JavaScript.

In this article, we’ll look at how to find the parent element using JavaScript.

How to find the parent element using JavaScript?

To find the parent element using JavaScript, we use the parentNode property.

For instance, we write

const parent = element.parentNode;

to use the parentNode to get the element‘s parent element.

Conclusion

To find the parent element using JavaScript, we use the parentNode property.

To preview images before upload with JavaScript, we use the FileReader constructor.

For instance, we write

<input type="file" />

to add the file input.

Then we write

const readURL = (file) => {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = (e) => res(e.target.result);
    reader.onerror = (e) => rej(e);
    reader.readAsDataURL(file);
  });
};

const preview = async (event) => {
  const [file] = event.target.files;
  const url = await readURL(file);
  const img = document.querySelector("img");
  img.src = url;
};

const fileInput = document.querySelector("input");
fileInput.addEventListener("change", preview);

to call querySelector to get the file input.

And then we call addEventListener to listen for the change event with the preview listener function.

In preview we get the select file with event.target.files

Then we call the readURL function to read the file as a base64 URL.

We call readAsDataURL to get the base64 result.

We call res with e.target.result to return the base64 URL string with the promise.

In preview, we call querySelector to get the img element.

And we set the img.src attribute’s value to url to show the image we get with await.

Sometimes, we want to append a CSS class to an element with JavaScript.

In this article, we’ll look at how to append a CSS class to an element with JavaScript.

How to append a CSS class to an element with JavaScript?

To append a CSS class to an element with JavaScript, we use the classList methods.

For instance, we write

element.classList.add("my-class-name");

to add the my-class-name class to the element with classList.add.

And we write

element.classList.remove("my-class-name");

to remove the my-class-name class from the element with classList.remove.

Conclusion

To append a CSS class to an element with JavaScript, we use the classList methods.

Sometimes, we want to print an iframe from JavaScript in Safari or Chrome.

In this article, we’ll look at how to print an iframe from JavaScript in Safari or Chrome.

How to print an iframe from JavaScript in Safari or Chrome?

To print an iframe from JavaScript in Safari or Chrome, we use the print method.

For instance, we write

window.print();

in our iframe content code or

const iframe = document.getElementById(id);
iframe.contentWindow.print();

in the main page’s code to print the iframe’s contents.

We get iframe by the ID with document.getElementById.

Then we call iframe.contentWindow.print to print the iframe’s contents.

Conclusion

To print an iframe from JavaScript in Safari or Chrome, we use the print method.