Author: John Au-Yeung

To show or hide ‘div’ using JavaScript, we set the div’s style.display property.

For instance, we write

element.style.display = "none";

to hide the element by setting element.style.display to 'none'.

We write

element.style.display = "block";

To show the element as a block element by setting element.style.display to 'block'.

Or we write

element.style.display = "inline";

To show the element as an inline element by setting element.style.display to 'inline'.

Or we write

element.style.display = "inline-block";

To show the element as an inline block element by setting element.style.display to 'inline-block'.

To get the parent div of element with JavaScript, we use the parentNode property.

For instance, we write

const parentDiv = pDoc.parentNode;

to get the parent div element of the pDoc element with the parentNode property.

To get value of HTML checkbox from onclick/onchange events with JavaScript, we use the value property.

For instance, we write

<input type="checkbox" onclick="onClickHandler()" id="box" />

to add a checkbox.

We set the onclick attribute to call the onClickHandler function when we click on the checkbox.

Then we write

function onClickHandler() {
  const chk = document.getElementById("box").value;
}

to define the onClickHandler function.

In it, we get the checkbox with getElementById.

Then we get the value of the checkbox from the value property.

To adjust width of input field to its input with JavaScript, we set the input’s width as we type.

For instance, we write

<input />

to add the input.

Then we write

const input = document.querySelector("input");

function resizeInput() {
  this.style.width = this.value.length + "ch";
}

input.addEventListener("input", resizeInput);
resizeInput.call(input);

to select the input with querySelector.

We then define the resizeInput function that sets the width of the input to the width of the number of characters of the input value.

this is the input element.

Next we call addEventListener to listen for the input event and call resizeInput when we type into the input.

And then we call resizeInput.call with input to do the initial width adjustment.

To implement "select all" check box with JavaScript, we can loop through all the checkboxes and check them.

For instance, we write

<input type="checkbox" onclick="toggle(this)" /> Toggle All<br />

<input type="checkbox" name="foo" value="bar1" /> Bar 1<br />
<input type="checkbox" name="foo" value="bar2" /> Bar 2<br />
<input type="checkbox" name="foo" value="bar3" /> Bar 3<br />
<input type="checkbox" name="foo" value="bar4" /> Bar 4<br />

to add some checkboxes.

We set the onclick attribute of the first checkbox to call toggle with the checkbox as its argument.

Then we write

function toggle(source) {
  const checkboxes = document.getElementsByName("foo");
  for (const checkbox of checkboxes) {
    checkbox.checked = source.checked;
  }
}

to define the toggle function.

In it, we get all the checkboxes with name attribute foo with getElementsByName.

And then we loop through each one with a for-of loop.

In it, we set the checked value of the checkbox to checked value of the first checkbox.