Category: JavaScript Answers

To display a confirmation dialog when clicking an anchor link with JavaScript, we can call the confirm function in the click handler.

For instance, we write

const reallySure = (event) => {
  const message = "Are you sure about that?";
  const action = confirm(message);
  if (!action) {
    event.preventDefault();
  }
};

const actionToFunction = (event) => {
  switch (event.target.tagName.toLowerCase()) {
    case "a":
      reallySure(event);
      break;
    default:
      break;
  }
};

document.body.addEventListener("click", actionToFunction);

to call document.body.addEventListener with 'click' to add the actionToFunction click handler to the body element.

In actionToFunction, we check if an a element is clicked by getting the tag name of the element clicked with event.target.tagName.

If 'a' is returned after converting it to lower case, then we call reallySure.

In it, we call confirm to check if the user wants to confirm the action.

And if the user cancels, we call preventDefault to stop the default click behavior.

To find the closest ancestor element that has a specific class with JavaScript, we use the closest method.

For instance, we write

const closest = document.querySelector("p").closest(".near.ancestor");

to select the p element with querySelector.

And then we get the closest element from it with classes near and ancestor with the closest method.

To find the width of a div using vanilla JavaScript, we use the offsetWidth or clientWidth property.

For instance, we write

const offsetWidth = document.getElementById("myDiv").offsetWidth;
const clientWidth = document.getElementById("myDiv").clientWidth;

to select the div with getElementById.

And then we get the width of the div with the offsetWidth or clientWidth properties.

offsetWidth includes border width, and clientWidth does not.

To get the selected radio button’s value with JavaScript, we get the value property.

For instance, we write

const value = document.querySelector('input[name="genderS"]:checked').value;

to select the checked radio button with name attribute genders and that it’s checked by calling querySelector with 'input[name="genders"]:checked'

Then we get its value with the value property.

To stop event propagation with inline onclick attribute with JavaScript, we can call the stopPropagation method.

For instance, we write

<div onclick="onClick(event);">click me</div>

to set the onclick attribute to call the onClick function with the click event object.

Then we write

function onClick(event) {
  event.stopPropagation();
}

to define the onClick function to call the stopPropagation method to stop the click event from bubbling up.