Javascript Articles - Page 413 of 607

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 −

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 −

To toggle between hiding and showing an element with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    button {       padding: 10px;       border: none;       background-color: rgb(51, 51, 192);       color: white;       font-size: 18px;    }    .div-visible {       width: 100%;       padding: 50px 0;       text-align: center;       background-color: rgb(210, 230, 173);       margin-top: 20px;   ... Read More