Category: JavaScript

Sometimes, we want to get x and y coordinates on mouse click with JavaScript.

In this article, we’ll look at how to get x and y coordinates on mouse click with JavaScript.

How to get x and y coordinates on mouse click with JavaScript?

To get x and y coordinates on mouse click with JavaScript, we can get the clientX and clientY properties from the mouse event object.

For instance, we write

const printMousePos = (event) => {
  const { clientX, clientY } = event;
  document.body.textContent = `${clientX}, ${clientY}`;
};

document.addEventListener("click", printMousePos);

to call addEventListener to add a click listener to the page.

printMousePos is called when we click on anything on the page.

Then we get the x and y coordinates of the mouse with clientX and clientY respectively.

Conclusion

To get x and y coordinates on mouse click with JavaScript, we can get the clientX and clientY properties from the mouse event object.

Sometimes, we want to fix JavaScript (+) sign concatenating instead of giving sum of variables.

In this article, we’ll look at how to fix JavaScript (+) sign concatenating instead of giving sum of variables.

How to fix JavaScript (+) sign concatenating instead of giving sum of variables?

To fix JavaScript (+) sign concatenating instead of giving sum of variables, we should put parentheses around the expression that we want to add instead of concatenate.

For instance, we write

const divID = "question-" + (i + 1);

to wrap i + 1 with parentheses to return their sum instead of concatenating them.

Conclusion

To fix JavaScript (+) sign concatenating instead of giving sum of variables, we should put parentheses around the expression that we want to add instead of concatenate.

Sometimes, we want to change button text on click with JavaScript.

In this article, we’ll look at how to change button text on click with JavaScript.

How to change button text on click with JavaScript?

To change button text on click with JavaScript, we can add a click listener to the button.

For instance, we write

<input id="curtainInput" type="button" value="Open Curtain" />

to add a button input.

Then we write

document.getElementById("curtainInput").addEventListener(
  "click",
  (event) => {
    if (event.target.value === "Open Curtain") {
      event.target.value = "Close Curtain";
    } else {
      event.target.value = "Open Curtain";
    }
  },
  false
);

to select the button with getElementById.

Then we add a click listener to it with addEventListener.

In it, we check if the value attribute is 'Open Curtain'.

If it is, we set it to 'Close Curtain'.

Otherwise, we set it to 'Open Curtain'.

Conclusion

To change button text on click with JavaScript, we can add a click listener to the button.

Sometimes, we want to capture a backspace on the keydown event with JavaScript.

In this article, we’ll look at how to capture a backspace on the keydown event with JavaScript.

How to capture a backspace on the keydown event with JavaScript?

To capture a backspace on the keydown event with JavaScript, we can check the keyCode property.

For instance, we write

document.getElementById("foo").addEventListener("keydown", (event) => {
  if (event.keyCode === 8) {
    console.log("BACKSPACE was pressed");
    event.preventDefault();
  }
  if (event.keyCode === 46) {
    console.log("DELETE was pressed");
    event.preventDefault();
  }
});

to call addEventListener to listen to the keydown event.

In the event listener, we get the keyCode property.

If it’s 8, then backspace key is pressed.

And if it’s 46, the delete key is pressed.

Conclusion

To capture a backspace on the keydown event with JavaScript, we can check the keyCode property.

Sometimes, we want to make HTML canvas full screen with JavaScript.

In this article, we’ll look at how to make HTML canvas full screen with JavaScript.

How to make HTML canvas full screen with JavaScript?

To make HTML canvas full screen with JavaScript, we can set the canvas width and height to the page width and height.

For instance, we write

const canvas = document.getElementById("mainCanvas");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

to select the canvas with getElementById.

Then we set the canvas width to the body element’s width with

canvas.width = document.body.clientWidth;

And we do the same with the height with

canvas.height = document.body.clientHeight;

Conclusion

To make HTML canvas full screen with JavaScript, we can set the canvas width and height to the page width and height.