Month: June 2022

Sometimes, we want to set the selected option of the select box with JavaScript.

In this article, we’ll look at how to set the selected option of the select box with JavaScript.

How to set the selected option of the select box with JavaScript?

To set the selected option of the select box with JavaScript, we can use the setAttribute method.

For instance, we write

<select id="gate">
  <option value="null">- choose -</option>
  <option value="Gateway 1">Gateway 1</option>
  <option value="Gateway 2">Gateway 2</option>
</select>

to add the select element.

Then we write

document
  .querySelector("#gate option[value='Gateway 2']")
  .setAttribute("selected", true);

to select the option element we want to select with querySelector.

And we call setAttribute with 'selected' and true to select the option.

Conclusion

To set the selected option of the select box with JavaScript, we can use the setAttribute method.

Sometimes, we want to get a div height with plain JavaScript.

In this article, we’ll look at how to get a div height with plain JavaScript.

How to get a div height with plain JavaScript?

To get a div height with plain JavaScript, we use the clientHeight or offsetHeight property.

For instance, we write

const clientHeight = document.getElementById("myDiv").clientHeight;
const offsetHeight = document.getElementById("myDiv").offsetHeight;

to select the div with getElementById.

Then we get its height with clientHeight or offsetHeight.

clientHeight includes padding.

And offsetHeight includes the heights of the padding, scrollBar and borders.

Conclusion

To get a div height with plain JavaScript, we use the clientHeight or offsetHeight property.

Sometimes, we want to adjust the width and height of an iframe to fit with content in it with JavaScript.

In this article, we’ll look at how to adjust the width and height of an iframe to fit with content in it with JavaScript.

How to adjust the width and height of an iframe to fit with content in it with JavaScript?

To adjust the width and height of an iframe to fit with content in it with JavaScript, we can set the iframe’s parent window’s dimensions when the iframe’s content is loading.

For instance, we write

window.onload = () => {
  parent.document.getElementById("fileUploadIframe").style.height =
    document.body.clientHeight + 5 + "px";
  parent.document.getElementById("fileUploadIframe").style.width =
    document.body.clientWidth + 18 + "px";
};

to select the parent window’s iframe from the iframe’s code with parent.document.getElementById("fileUploadIframe").

Then we set its height and width to the iframe’s body element’s clientHeight and clientWidth.

Conclusion

To adjust the width and height of an iframe to fit with content in it with JavaScript, we can set the iframe’s parent window’s dimensions when the iframe’s content is loading.

Sometimes, we want to get the ID of the clicked button on click with JavaScript.

In this article, we’ll look at how to get the ID of the clicked button on click with JavaScript.

How to get the ID of the clicked button on click with JavaScript?

To get the ID of the clicked button on click with JavaScript, we can get the id property of the element clicked.

For instance, we write

<button id="1">B1</button>
<button id="2">B2</button>
<button id="3">B3</button>

to add 3 buttons.

Then we write

document.onclick = (e) => {
  console.log(e.target.id);
};

to set document.onclick to a function that’s called when we click on anything on the page.

And we can get ID of the element that’s clicked with e.target.id.

Conclusion

To get the ID of the clicked button on click with JavaScript, we can get the id property of the element clicked.

Sometimes, we want to HTML5 fix dragleave event firing when hovering a child element with JavaScript.

In this article, we’ll look at how to HTML5 fix dragleave event firing when hovering a child element with JavaScript.

How to HTML5 fix dragleave event firing when hovering a child element with JavaScript?

To HTML5 fix dragleave event firing when hovering a child element with JavaScript, we call addEventListener with false.

For instance, we write

const dropZone = document.getElementById("box");
const dropMask = document.getElementById("drop-mask");

dropZone.addEventListener("dragover", dragOver, false);
dropMask.addEventListener("dragleave", dragLeave, false);
dropMask.addEventListener("drop", dragDrop, false);

to select the drop zone element with

const dropZone = document.getElementById("box");

We select the draggable element with

const dropMask = document.getElementById("drop-mask");

Then we call addEventListener with false to disable event capturing which propagates events from the ancestors element to the originating element.

Then the dragleave event won’t be fired when hovering a child element.

Conclusion

To HTML5 fix dragleave event firing when hovering a child element with JavaScript, we call addEventListener with false.