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 −

Following is the code to update DOM in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;       color: rebeccapurple;    } Update DOM JavaScript CLICK HERE Click on the above button to create a new element    let resEle = document.querySelector(".result");    let heading = document.createElement("h3");    document.querySelector(".Btn").addEventListener("click", () => {       let headingText = document.createTextNode("This is a random heading");       heading.appendChild(headingText);       resEle.appendChild(heading);    }); OutputThe above code will produce the following output −On clicking the ‘CLICK HERE’ button −

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

Following is the code to convert a node list to an array in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       display: inline-block;       font-size: 20px;       font-weight: 500;       color: white;       background-color: blue;       padding:10px;       width: 100px;       height: 100px;    } Convert a node list to an array 1 2 3 4 CLICK HERE Click on the above button to change colors of all the above div    let sampEle = document.querySelectorAll('.sample');    let BtnEle = document.querySelector('.Btn');    BtnEle.addEventListener('click',()=>{       Array.from(sampEle).forEach(item=>{          item.style.backgroundColor = 'red';       })    }) OutputOn clicking the ‘CLICK HERE’ button −

Following is the code to check if a property is in an object in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;       color: blueviolet;    } Checking a property in an object CLICK HERE Click on the above button to check if firstName property is present in obj object    let resEle = document.querySelector(".result");    let obj = { firstName: "Rohan", lastName: "Sharma", ... Read More

Following is the code to implement pseudo mandatory parameters in functions in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;       color: blueviolet;    } Optional function parameters CLICK HERE Click on the above button to call the add() and multiply() function    let resEle = document.querySelector(".result");    function add(a = 0, b = 0) {       return a + b;    }    function multiply(a, b) {       a = a || 0;       b = b || 0;       return a + b;    }    document.querySelector(".Btn").addEventListener("click", () => {       resEle.innerHTML = "Sum of the numbers = " + add() + "";       resEle.innerHTML +=       "Multiplication of the numbers = " + multiply() + "";    }); OutputOn clicking the ‘CLICK HERE’ button −

The consice arrow is more stream lined form of fat arrow functions for one-line functions. If the function body only has one line of code, then there isn’t any need of curly braces {} for function body as conscie arrow functions have implicit return. Also, if there is only one parameter then that can be written without the parenthesis () but if there is no parameter then the parenthesis is necessary.SyntaxFat arrow function −let add = (a, b) =>{return a+b;}Consice arrow function:let add = (a, b)=>a+b;If one parameter only −let add = a=>a+22;Following is the code for fat vs concise ... Read More