The JavaScript symbol.valueOf() function returns the primitive value of a symbol object.Following is the code for implementing symbol.valueOf() function −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.valueOf() function CLICK HERE Click on the above button to get the value of symbols    let fillEle = document.querySelector(".sample");    const symbol = Symbol('computer');    const symbol1 = Symbol(234);    let res = symbol.valueOf();    let res1 = symbol1.valueOf();    document.querySelector(".Btn").addEventListener("click", () => {       fillEle.innerHTML += 'res = ' + res.toString() + "";       fillEle.innerHTML += 'res1 = ' + res1.toString() + "";    }); OutputOn clicking the “CLICK HERE” button −

The JavaScript Symbol.toStringTag symbol is a very well known symbol that is a string valued property used for giving a description of an object during its creationFollowing is the code for Symbol.toStringTag symbol −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript Symbol.toStringTag Symbol CLICK HERE Click on the above button to get the string description for objects    let fillEle = document.querySelector(".sample"); ... Read More

To find out if an element is hidden with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .hiddenDiv {       width: 100%;       padding: 20px;       text-align: center;       background-color: lightblue;       margin-top: 20px;       display: none;       font-size: 20px;    }    .showBtn {       border: none;       padding: 15px;       font-size: 18px;       background-color: rgb(86, 25, ... Read More

To detect whether the browser is online or offline with JavaScript, the code is as follows −Example Live Demo Online or offline with JavaScript example Click the button below to check if you are online or not Check online/offline    function checkOnlineOffline() {       if(navigator.onLine===true){          document.querySelector('.sample').innerHTML = "You are connected to internet"       } else {          document.querySelector('.sample').innerHTML = "You are not connected to internet"       }    } OutputThe above code will produce the following output −On clicking the “Check online/offline” button −

In this tutorial, we will look at a few methods to remove a property from a JavaScript object. And compare them to understand which one is suitable in a given context. Let's move forward to discuss this. Using the delete Operator Here, the delete operator removes the keys from the object, one at a time. The delete operator does not clear the memory directly. The delete keyword works on objects only. We can't use it on variables or functions. We should not use the delete keyword on predefined JavaScript object properties as it may give errors. The deleted property displays ... Read More

To add an active class to the current element with JavaScript, the code is as follows −Example Live Demo    .btn {       border: none;       outline: none;       padding: 10px 16px;       background-color: #6ea2f0;       cursor: pointer;       color:white;       font-size: 18px;    }    .active, .btn:hover {       background-color: #666;       color: white;    } Active Button Example Giraffe Cow Lion Leopard Cheetah Press any of the above button to set it ... Read More

To remove a class name from an element with JavaScript, the code is as follows −Example Live Demo    .newStyle {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       width: 100%;       padding: 25px;       background-color: rgb(147, 80, 255);       color: white;       font-size: 25px;       box-sizing: border-box;       text-align: center;    } Remove className with JavaScript Example Remove Class Click the above button to remove className from below div This is a DIV element.    document.querySelector(".btn").addEventListener("click", addClassName);    function addClassName() {       var element = document.getElementById("sampleDiv");       element.classList.remove("newStyle");    } OutputThe above code will produce the following output −On clicking the the “Remove Class” button −

To add a class name to an element with JavaScript, the code is as follows −Example Live Demo    .newStyle {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       width: 100%;       padding: 25px;       background-color: rgb(147, 80, 255);       color: white;       font-size: 25px;       box-sizing: border-box;       text-align: center;    } Adding className with JavaScript Example Click here Click the above button to add className to below div This is a DIV element.    document.querySelector(".btn").addEventListener("click", addClassName);    function addClassName() {       var element = document.getElementById("sampleDiv");       element.classList.add("newStyle");    } OutputThe above code will produce the following output −On clicking the “Click here” button −

To toggle between adding and removing a class name from an element with JavaScript, the code is as follows −Example Live Demo    .newStyle {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       width: 100%;       padding: 25px;       background-color: rgb(147, 80, 255);       color: white;       font-size: 25px;       box-sizing: border-box;       text-align: center;    } Adding className with JavaScript Example Click here Click the above button to add className to below div This is a DIV element.    document.querySelector(".btn").addEventListener("click", addClassName);    function addClassName() {       var element = document.getElementById("sampleDiv");       element.classList.toggle("newStyle"); } OutputThe above code will produce the following output −On clicking the “Click here” button −

To toggle text with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .textDiv {       font-size: 20px;       background-color: rgb(199, 228, 157);       width: 100%;       padding: 15px;       font-weight: bold;    }    .toggleBtn {       padding: 15px;       border: none;       background-color: rgb(106, 41, 153);       color: white;       font-size: 18px;    } Toggle Text example Click Me Click on the above button to toggle below text Old Text    document .querySelector(".toggleBtn") .addEventListener("click", toggleText);    function toggleText() {       var x = document.querySelector(".textDiv");       if (x.innerHTML === "Old Text") {          x.innerHTML = "New Text";       } else {          x.innerHTML = "Old Text";       }    } OutputThe above code will produce the following output −On clicking the “Click Me” button −