Author: John Au-Yeung

Sometimes, we want to call onclick on a radio button list using JavaScript.

In this article, we’ll look at how to call onclick on a radio button list using JavaScript.

How to call onclick on a radio button list using JavaScript?

To call onclick on a radio button list using JavaScript, we call the click method.

For instance, we write

document.getElementById("radioButton").click();

to select the radio button with getElementById.

And then we call click on it to click it.

Conclusion

To call onclick on a radio button list using JavaScript, we call the click method.

Sometimes, we want to display a JavaScript variable in HTML body.

In this article, we’ll look at how to display a JavaScript variable in HTML body.

How to display a JavaScript variable in HTML body?

To display a JavaScript variable in HTML body, we set the innerHTML property of the element.

For instance, we write

<h1>"The value for number is: " <span id="myText"></span></h1>

to add some elements.

Then we write

const number = "123";
document.getElementById("myText").innerHTML = number;

to select the span with getElementById and then set its innerHTML property to number to render number in the span.

Conclusion

To display a JavaScript variable in HTML body, we set the innerHTML property of the element.

Sometimes, we want to fire a change event on a HTML select element if the new value is the same as the old with JavaScript.

In this article, we’ll look at how to fire a change event on a HTML select element if the new value is the same as the old with JavaScript.

How to fire a change event on a HTML select element if the new value is the same as the old with JavaScript?

To fire a change event on a HTML select element if the new value is the same as the old with JavaScript, we add an empty option.

For instance, we write

<select onchange="jsFunction()">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

to add an empty option element so that jsFunction is called whether the selected value is the same as the old one or not.

Conclusion

To fire a change event on a HTML select element if the new value is the same as the old with JavaScript, we add an empty option.

Sometimes, we want to iterate over values of object with JavaScript.

In this article, we’ll look at how to iterate over values of object with JavaScript.

How to iterate over values of object with JavaScript?

To iterate over values of object with JavaScript, we use the Object.entries method.

For instance, we write

const map = { key1: "value1", key2: "value2" };

for (const [key, value] of Object.entries(map)) {
  console.log(`${key}: ${value}`);
}

to use a for-of loop to loop through the array entries returned by Object.entries.

Object.entries returns an array of array of key-value pair strings.

We get the key with key and value from value.

Conclusion

To iterate over values of object with JavaScript, we use the Object.entries method.

Sometimes, we want to close an iframe within iframe itself with JavaScript.

In this article, we’ll look at how to close an iframe within iframe itself with JavaScript.

How to close an iframe within iframe itself with JavaScript?

To close an iframe within iframe itself with JavaScript, we use the remove the iframe.

For instance, we get the parent of the iframe and then call closeFrame on it by writing

parent.closeIFrame();

where closeIFrame is

function closeIFrame() {
  document.getElementById("youriframeid").remove();
}

in the parent.

We select the iframe with getElementById.

And then we call remove to remove it.

Conclusion

To close an iframe within iframe itself with JavaScript, we use the remove the iframe.