Category: JavaScript

To append HTML string to the DOM with JavaScript, we create an element with the HTML inside.

For instance, we write

const child = document.createElement("div");
child.innerHTML = str;
child = child.firstChild;
document.getElementById("test").appendChild(child);

to create the div with createElement.

And then we set its innerHTML property to the HTML string str.

Next, we get the first chilld of the div with firstChild.

And then we call appendChild to append the child as the last child o the element with ID test.

To change the selected option of an HTML Select element with JavaScript, we set the value property.

For instance, we write

<select id="sel">
  <option value="1">Cat</option>
  <option value="2">Dog</option>
  <option value="3">Fish</option>
</select>

to add a select drop down.

Then we write

document.getElementById("sel").value = "1";

to select the drop down with getElementById.

And we set its value property to the string of the value attribute of the option element we want to select to select it.

To resize (downscale) high quality image with HTML5 canvas and JavaScript, we call the scale method.

For instance, we write

const setCanvasSize = (canvas, rate) => {
  const scaleRate = rate;
  canvas.width = window.innerWidth * scaleRate;
  canvas.height = window.innerHeight * scaleRate;
  canvas.style.width = window.innerWidth + "px";
  canvas.style.height = window.innerHeight + "px";
  canvas.getContext("2d").scale(scaleRate, scaleRate);
};

to set the canvas width and height with

canvas.width = window.innerWidth * scaleRate;
canvas.height = window.innerHeight * scaleRate;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";

then we scale its content by the scaleRate horizontally and vertically with

canvas.getContext("2d").scale(scaleRate, scaleRate);

To capture key press (or keydown) event on DIV element with JavaScript, we listen for the keyup event.

For instance, we write

document.querySelector("#myDiv").addEventListener("keyup", (e) => {
  console.log(e.key);
});

to select the div with ID myDiv with querySelector.

And then we call addEventListener to listen for the keyup event.

We use a function that logs the key of that’s pressed as the event handler.

e.key is a string with the key’s value.

To save canvas as an image with canvas.toDataURL() and JavaScript, we set the URL returned by toDataURL as the window.location.href property’s value.

For instance, we write

const image = canvas
  .toDataURL("image/png")
  .replace("image/png", "image/octet-stream");
window.location.href = image;

to call toDataURL to return a base64 URL with the canvas content.

Then we call replace to replace 'image/png' with "image/octet-stream".

And then we set image as the value of window.location.href to save the image.