Category: JavaScript

Sometimes, we want to track onchange when typing in text input with JavaScript.

In this article, we’ll look at how to track onchange when typing in text input with JavaScript.

How to track onchange when typing in text input with JavaScript?

To track onchange when typing in text input with JavaScript, we listen to the input event.

For instance, we write

const source = document.getElementById("source");

const inputHandler = (e) => {
  console.log(e.target.value);
};

source.addEventListener("input", inputHandler);

to select the input with getElementById.

Then we call addEventListener to listen for the input event in the input.

inputHandler is called when we change the input’s value.

Conclusion

To track onchange when typing in text input with JavaScript, we listen to the input event.

Sometimes, we want to dynamically change a web page’s title with JavaScript.

In this article, we’ll look at how to dynamically change a web page’s title with JavaScript.

How to dynamically change a web page’s title with JavaScript?

To dynamically change a web page’s title with JavaScript, we set its document.title property.

For instance, we write

document.title = "test";

to set the document.title property to 'test' to make the page title ‘test’.

Conclusion

To dynamically change a web page’s title with JavaScript, we set its document.title property.

Sometimes, we want to invoke JavaScript code in an iframe from the parent page.

In this article, we’ll look at how to invoke JavaScript code in an iframe from the parent page.

How to invoke JavaScript code in an iframe from the parent page?

to invoke JavaScript code in an iframe from the parent page, we get the function from the contentWindow property.

For instance, we write

document.getElementById("targetFrame").contentWindow.targetFunction();

to get the iframe with getElementById.

Then we call the targetFunction function in the iframe after getting it from the contentWindow property.

Conclusion

to invoke JavaScript code in an iframe from the parent page, we get the function from the contentWindow property.

Sometimes, we want to select all text in HTML text input when clicked with JavaScript.

In this article, we’ll look at how to select all text in HTML text input when clicked with JavaScript.

How to select all text in HTML text input when clicked with JavaScript?

To select all text in HTML text input when clicked with JavaScript, we call the input’s select method on click.

For instance, we write

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />

to call this.select when we click on the input to select all the text in it when we click on the input.

Conclusion

To select all text in HTML text input when clicked with JavaScript, we call the input’s select method on click.

Sometimes, we want to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

In this article, we’ll look at how to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.

For instance, we write

const canvas = document.getElementById("mycanvas");
const image = canvas.toDataURL("image/png");

to get the canvas with getElementById.

Then we call toDataURL with 'image/png' to return a base64 string with the canvas content in png format.

Conclusion

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.