To get the text of the span element in JavaScript, the code is as follows −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       font-size: 18px;       font-weight: 500;    } JavaScript Date Methods This is some sample text inside a span element CLICK HERE Click on the above button to get the span text    let sampleEle = document.querySelector(".sample");    let spanEle = document.querySelector(".test");    document.querySelector(".Btn").addEventListener("click", () => {       sampleEle.innerHTML = "The span text is = " + spanEle.innerHTML;    }); OutputOn clicking the “CLICK HERE” button −

To implement JavaScript Auto Complete / Suggestion feature, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    } JavaScript Auto Complete / Suggestion feature    var tags = ["orange", "apple","pineapple","guava","mango","pomegranate","litchi",];    let check;    document.querySelector(".fruits").addEventListener("keyup", (event) => {       let value = event.target.value;       document.getElementById("datalist").innerHTML = "";       tags.forEach((item) => {          if (item.toLowerCase().indexOf(value.toLowerCase()) > -1) {             var opt = document.createElement("option");             var sel = document.createTextNode(item);             opt.appendChild(sel);             document.getElementById("datalist").appendChild(opt);          }       });    }); OutputOn typing something in the input field −

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 −

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 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 −