Following is the code to display an alert for form’s unsaved changes in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    input {       margin: 10px;    } Alert for unsaved changes in form Username Password SUBMIT    function pageUnload() {       return "The data on this page will be lost if you leave";    } OutputIf we click on the reload button then the following warning will be shown −

Following is the code to find the coordinates of every link in a page using JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500; } Coordinates of every link in a page google.com facebook.com yahoo.com CLICK HERE Click on the above button to display the link coordinates    let resEle = document.querySelector(".result");    let BtnEle = document.querySelector(".Btn");    let links = document.getElementsByTagName("a");    BtnEle.addEventListener("click", () ... Read More

Following is the code to circle coordinates to array in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-weight: 500;       font-size: 18px;       color: blueviolet;    } Circle coordinates to array CLICK HERE Click on the above button to generate the circle coordinates    let resEle = document.querySelector(".result");    let BtnEle = document.querySelector(".Btn");    let xCoords = [];    let yCoords = [];    function circleCoordinates(radius, steps, ... Read More

Following is the code to retrieve the text contents of the user selection using JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result, .sample {       font-size: 20px;       font-weight: 500;       color: rebeccapurple;    } Retrieve the text contents of the user selection Here is some text inside the div SELECT Click on the above button to display the text selected by the user    let resEle = document.querySelector(".result"); ... Read More

Following is the code to select and deselect text inside an element using JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;    } Select and Deselect Text Inside an Element Here is some text inside the div SELECT DESELECT Click on the above button to select/de-select text inside the div    let resEle = document.querySelector(".result");    let BtnEle = document.querySelectorAll(".Btn");    BtnEle[0].addEventListener("click", () => {       window.getSelection().selectAllChildren(resEle);    });    BtnEle[1].addEventListener("click", () => {       window.getSelection().removeAllRanges();    }); OutputThe above code will produce the following output −On clicking the ‘SELECT’ button −On clicking the ‘DESELECT’ button −

Following is the code to de-select text on HTML page −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;       color: rebeccapurple;    } De-select text on HTML page Here is some text inside the div CLICK HERE Click on the above button to deselect everything on this page    let resEle = document.querySelector(".result");    document.querySelector(".Btn").addEventListener("click", () => {       window.getSelection().removeAllRanges();    }); OutputThe above code will produce the following output −Selecting some text on the page −On clicking the ‘CLICK HERE’ button −

JavaScript is a powerful tool for dynamically updating the Document Object Model (DOM) of a web page. The Document Object Model (DOM) is an important part of web development that allows changing the structure, content, and style of a webpage. This article explains how to update the DOM using different methods and provides examples. Understanding the DOM DOM stands for Document Object Model. The DOM represents a webpage as a tree structure, where each element is a node. JavaScript allows developers to select, modify, and manipulate these elements in real time, making web pages dynamic and interactive. Updating ... Read More

Following is the code for combining multiple images into a single one using JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    } Combining multiple images into a single one CLICK HERE Click on the above button to combine the two images above together    let imgEle1 = document.querySelectorAll(".image")[0];    let imgEle2 = document.querySelectorAll(".image")[1];    let resEle = document.querySelector(".result");    var context = resEle.getContext("2d");    let BtnEle = document.querySelector(".Btn");    BtnEle.addEventListener("click", () => {    resEle.width = imgEle1.width;       resEle.height = imgEle1.height;       context.globalAlpha = 1.0;       context.drawImage(imgEle1, 0, 0);       context.globalAlpha = 0.5;       context.drawImage(imgEle2, 0, 0);    }); OutputOn clicking the ‘CLICK HERE’ button −

Following is the code to sort strings with accented characters in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result, .sample {       font-size: 18px;       font-weight: 500;       color:blueviolet    }    .sample{       color:red;    } Sort strings with accented characters [qué, cómo, dóndé, quién, cuánto, cuántos] CLICK HERE Click on the above button to sort the above array    let resEle = document.querySelector('.result');   ... Read More

The “TypeError: ‘undefined’ is not an object” error occurs when a property is accessed or a method is called on an undefined object. This error is shown only on safari browser.Following is the code for TypeError − ‘undefined’ is not an object error in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;       color:blueviolet    } TypeError: ‘undefined’ is not an object example CLICK ... Read More