In JavaScript, we can use the location.reload() to reload a page, which is part of the native JavaScript Window interface. location.reload(); Or a longer version. window.location.reload(); Table of contents: 1. Reload the page and bypass the cache 2. Reload page with JavaScript 3. References 1. Reload the page and bypass the cache The location.reload() method […]
In JavaScript, we can use document.querySelector() to check if an element exists. The document.querySelector() searches for and returns the first element matching a selector or set of selectors. If it finds no matching elements, it returns null. For example, to check if an element with the id elementId exists: if (document.querySelector("#elementId")) { // The element […]
In JavaScript, we can use the built-in filter() function to remove a specified item from an array. Table of contents: 1. Remove specified item from the array with filter() 2. Remove two specified items from the array with filters() and includes() 3. JavaScript examples 4. References 1. Remove specified item from the array with filter() […]
A JavaScript example to show you how to get the selected value or text from a dropdown list. A drop box list. <select id="country"> <option value="None">– Select –</option> <option value="ID001">China</option> <option value="ID002" selected>United State</option> <option value="ID003">Malaysia</option> </select> Get option value : var e = document.getElementById("country"); var result = e.options[e.selectedIndex].value; alert(result); //ID002 Get option text : […]
In JavaScript, we can use for, forEach or for..of to loop an Array. 1.1 for //old-school, classic for loop var str = ["a", "b", "c", "d", "e"]; for(var i =0; i < str.length; i++){ console.log(str[i]); //a,b,c,d,e } output a b c d e 1.2 forEach() var num = [1, 2, 3, 4, 5]; num.forEach(anyFunction) function […]
In JavaScript, we can use forEach(function) to loop an Array. The provided function in forEach() will run once for each array element. var total = 0; var num = [1, 2, 3, 4, 5]; num.forEach(anyFunction) function anyFunction(data){ total += data; } console.log(total); //15 var words = ""; var num = ["a", "b", "c", "d", "e"]; […]
In JavaScript, we can combine indexOf() and splice() to remove a certain element from an Array. var array = [1, 2, 3, 4, 5]; console.log(array) // I want remove num 4, find the index first, -1 if it is not present. var index = array.indexOf(4); if (index > -1) { // found array.splice(index, 1); } […]
In JavaScript, we can use either location.replace() or location.href to redirect a page. Normally, we use location.replace() to simulate an HTTP redirect. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>JavaScript – How to redirect a page</h1> <h3>1. location.replace</h3> <button onclick="httpRedirect()">location.replace</button> <h3>2. location.href</h3> <button onclick="mouseClick()">location.href</button> <script> // Simulate an HTTP redirect function httpRedirect() { location.replace("https://www.mkyong.com") […]
In JavaScript, we can use the classic indexOf() or the new ES6 includes to check if a String contains a substring. // old school, classic way var str = "mkyong"; if (str.indexOf(‘yo’) > -1) { // returns `-1` if it is not present. console.log(‘match’) // display this } else { console.log(‘not found’) } // ES6 […]
In JavaScript, you can use JSON.stringify to convert an array or values into a JSON formatted string. var output = {} output[0] = "a"; output[1] = "b"; output[2] = "c"; console.log( JSON.stringify(output) ); Output { "0":"a", "1":"b", "2":"c" } 1. jQuery Ajax Request Often times, you need to convert the JavaScript values into JSON before […]
Below is a JSON string. JSON String { "name": "mkyong", "age": 30, "address": { "streetAddress": "88 8nd Street", "city": "New York" }, "phoneNumber": [ { "type": "home", "number": "111 111-1111" }, { "type": "fax", "number": "222 222-2222" } ] } To access the JSON object in JavaScript, parse it with JSON.parse(), and access it via […]
For security concern, many users like to disable JavaScript in their web browser, and it raise a big problem in many website which depends on JavaScript to function well. The easy and simple solution is using the HTML “noscript” tag to display different content if JavaScript is disabled. See following full “noscript” example : If […]
In some cases, your JavaScript may need to depend on a particular variable to “define” or “exists”, in order to process on the next step. Note I don’t recommend to do so, as JavaScript shouldn’t involve any business logic, it should be purely basic validation or UI enhancement, but, many still like to code complex […]
In JavaScript, there are two ways to check if a variable is a number : isNaN() – Stands for “is Not a Number”, if variable is not a number, it return true, else return false. typeof – If variable is a number, it will returns a string named “number”. Note Normally, people use isNaN() to […]
In this tutorial, we show you how to link an external JavaScript file (file extension end with .js) to web page. Note In HTML, you can either embed JavaScript on web page or external JavaScript file, or implemented both ways together. 1. External JavaScript file Create a new file end with “.js” file extension, and […]
In JavaScript, you can use following two ways to get hidden field value in a form : document.getElementById(‘hidden field id’).value document.formName.elements[‘hidden field name’].value See an example here… <html> <body> <script type="text/javascript"> function printIt(){ alert(document.getElementById(‘abcId’).value); alert(document.formName.elements[‘abcName’].value); } </script> <h1>Access Hidden value in JavaScript</h1> <form name="formName"> <input type=hidden id="abcId" name="abcName" value="Wall Street! Money Never Sleep"/> <input type=button […]
Often times, we need to “preload” an image into browser’s cache for performance concern. For instance, we have a mouseover event and the image needs to be update without any delay. This “Preloading” stuff can be achieved in two ways , either JavaScript or HTML code. Javascript We can “preload” an image with the following […]
The focus() method is used to give focus to a textbox, or other html components. Here is a simple example to make a textbox focus automatically after page load. focus is not working in IE The above code is working fine in Firefox (FF), but not in Internet Explorer (IE). Actually the IE is supporting […]
The getElementsByName() method is use to get the element by name. However be aware of the getElementsByName() method always return an array as output. Caution The method always return an array, and we have to use [] to access the value. For example alert(document.getElementsByName(“myInput”).value); It will prompt out an undefined value alert(document.getElementsByName(“myInput”)[0].value); It will prompt […]
In JavaScript, you can use getElementById() fucntion to get any prefer HTML element by providing their tag id. Here is a HTML example to show the use of getElementById() function to get the DIV tag id, and use InnerHTML() function to change the text dynamically. HTML… <html> <head> <title>getElementById example</title> <script type="text/javascript"> function changeText(text) { […]
Many webmasters like to disable the right click button to protect their own content. Here is the JavaScript to disable right click button on a website : <script> <!– //edit this message to say what you want var message = "Function Disabled"; function clickIE() { if (document.all) { alert(message); return false; } } function clickNS(e) […]
This article shows how to call a function after a page is loaded in Javascript. Table of contents: 1. Document: DOMContentLoaded event 2. Window: load event 3. Javascript calls a function after the page loaded 4. References 1. Document: DOMContentLoaded event In modern JavaScript, the most common way to run code after loading the page […]
