Category: JavaScript

To fix the "cannot read properties of undefined (reading ‘style’)" error with JavaScript, we should make sure the element we’re selecting isn’t null.

For instance, we write

const boxElement = document.querySelector(".box");
if (boxElement) {
  boxElement.style.width = "100px";
  boxElement.style.height = "100px";
  boxElement.style.backgroundColor = "#f00";
}

to select the element with the class box with querySelector.

Then if boxElement isn’t null, then we set its width, height and backgroundColor styles to apply the style values we want.

If the element isn’t null, then the style property should always be an object.

To render HTML to an image with JavaScript, we use the html2canvas package.

To install it, we add the script tag with src pointing to https://html2canvas.hertzen.com/dist/html2canvas.min.js

Then we write

const canvas = await html2canvas(document.getElementById("image-wrap"));
const link = document.createElement("a");
document.body.appendChild(link);
link.download = "pic.jpg";
link.href = canvas.toDataURL();
link.target = "_blank";
link.click();

to select the element with getElementById.

And then we call html2canvas with the element.

We get the canvas from the returned promise with await.

Next we create a link with createElement.

We set the download property to the file name.

We call canvas.toDataURL to return the canvas content as a base64 URL string and set it as the value of the href property.

Then we call click to download the content.

To use a HTML button to call a JavaScript function, we add a click event handler to it.

For instance, we write

<input id="clickMe" type="button" value="clickme" />

to add a button.

Then we write

document.getElementById("clickMe").onclick = () => {
  alert("hello!");
};

to select the button with getElementByid.

And we set its onclick property to a function that shows an alert box that shows hello! when we click the button.

To remove an item from a select box with JavaScript, we use the remove method.

For instance, we write

<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

to add the select drop down.

Then we write

document.querySelector("#selectBox option[value='option1']").remove();

to select the option element in the drop down with the value attribute set to option1 with querySelector.

And then we call remove to remove the option.