What Does JavaScript Void(0) Mean?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="javascript void 0, related, cache, reload, refresh, stop page from loading, javascript tutorial, code, function, source, learn, method, javascript dropdown menu, jscript, reference"> <meta name="Description" content="JavaScript void 0 prevents the browser from loading a new page (or refreshing the current page)."> <link rel="canonical" href="https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm"> <title>What Does JavaScript Void(0) Mean?</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">What Does JavaScript Void(0) Mean?</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/javascript/tutorial/javascript_escape_characters.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Escape Characters</a></li> <li><a href="/javascript/tutorial/javascript_cookies.cfm">JavaScript Cookies <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">The JavaScript <code>void</code> operator evaluates the given expression and then returns a value of <code>undefined</code>. </p> <p>You may ocassionally encounter an HTML document that uses <code>href="JavaScript:Void(0);"</code> within an <a href="/html/tags/html_a_tag.cfm"><code><a></code></a> element.</p> <p>JavaScript <code>void</code> is often used when, inserting an expression into a web page may produce an unwanted side-effect.</p> <p>By using <code>JavaScript:Void(0)</code>, you can eliminate the unwanted side-effect, because it will return the <code>undefined</code> primative value.</p> <p>A common usage of <code>JavaScript:Void(0)</code> is with hyperlinks.</p> <p>Sometimes, you may need to call some JavaScript from within a link. Normally, when you click a link, the browser loads a new page or refreshes the same page (depending on the URL specified). But you probably don't want this to happen if you've attached some JavaScript to that link.</p> <p>To prevent the page from refreshing, you could use <code>JavaScript:void(0)</code>.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Example of <code>JavaScript:void(0)</code></h2> <p>We have a link that should only do something (display a message) upon two clicks (a double click). If you click once, nothing should happen. We can specify the double click code by using the <code>ondblclick</code> event handler. To prevent the page reloading upon a single click, we can use <code>JavaScript:void(0);</code> within the anchor link.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><a href="JavaScript:void(0);" ondblclick="alert('Well done!')">Double Click Me!</a></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/javascript/tutorial/javascript_void_0" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Same Example, but without <code>JavaScript:void(0)</code></h2> <p>Look at what would happen if we didn't use <code>JavaScript:void(0);</code> within the anchor link...</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><a href="#" ondblclick="alert('Well done!')">Double Click Me!</a></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/javascript/tutorial/javascript_void_0_without_void_0" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Did you notice the page refreshed as soon you clicked the link (actually, it refreshed the <a href="/html/tags/html_iframe_tag.cfm"><code><iframe></code></a> content on this example — therefore, the above link probably disappeared when you clicked it). Even if you double clicked and triggered the <code>ondbclick</code> event, it will still happen!</p> <p>So the <code>void</code> operator can be useful when you need to call another function that may have otherwise resulted in an unwanted page refresh.</p> <div class="info"> <p>If the website uses a <a href="/html/tags/html_base_tag.cfm"><code><base></code></a> element, the link will lead to the URL specified in the <a href="/html/tags/html_base_tag.cfm"><code><base></code></a> element. Either way, using <code>void(0)</code> will prevent this from happening.</p> </div> <h2>JavaScript:Void(0) Alternatives</h2> <p>The practice of using <code>JavaScript:Void(0)</code> to prevent the page from refreshing is a quick and easy solution, but not necessarily the most scalable or accessible solution, and it doesn't follow the principles of unobtrusive JavaScript.</p> <p>It's often better to use a different HTML element as the trigger for the JavaScript (a <a href="/html/tags/html_button_tag.cfm"><code><button></code></a> element for example). You can use CSS to change its appearance if it needs to look more like a hyperlink.</p> <p>However, if you <em>must</em> use the <a href="/html/tags/html_a_tag.cfm"><code><a></code></a> element, try to ensure that the <code>href</code> attribute uses a valid URL so that non-JavaScript users can still reach the content in some way.</p> <h3><code>event.preventDefault()</code></h3> <p>When doing this, you can use <code>event.preventDefault()</code> within an <code>onclick</code> event handler to prevent the page from refreshing.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><a href="https://www.quackit.com/" onclick="event.preventDefault();" ondblclick="alert('Well done!')">Double Click Me!</a></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/javascript/tutorial/javascript_void_0_prevent_default" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3><code>return false</code></h3> <p>Using <code>return false;</code> will do the same thing.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><a href="https://www.quackit.com/" onclick="return false;" ondblclick="alert('Well done!')">Double Click Me!</a></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/javascript/tutorial/javascript_void_0_return_false" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <ul class="pager"> <li><a href="/javascript/tutorial/javascript_escape_characters.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Escape Characters</a></li> <li><a href="/javascript/tutorial/javascript_cookies.cfm">JavaScript Cookies <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/javascript/tutorial/">JavaScript Tutorial</a></h3> <ul> <li><a href="/javascript/tutorial/introduction.cfm">Introduction</a></li> <li><a href="/javascript/tutorial/how_to_enable_javascript.cfm">How to Enable JavaScript</a></li> <li><a href="/javascript/tutorial/javascript_syntax.cfm">JavaScript Syntax</a></li> <li><a href="/javascript/tutorial/javascript_popup_boxes.cfm">JavaScript Popup Boxes</a></li> <li><a href="/javascript/tutorial/javascript_html.cfm">JavaScript and HTML</a></li> <li><a href="/javascript/tutorial/external_javascript_file.cfm">External JavaScript File</a></li> <li><a href="/javascript/tutorial/javascript_operators.cfm">JavaScript Operators</a></li> <li><a href="/javascript/tutorial/javascript_variables.cfm">JavaScript Variables</a></li> <li><a href="/javascript/tutorial/javascript_functions.cfm">JavaScript Functions</a></li> <li><a href="/javascript/tutorial/javascript_events.cfm">JavaScript Events</a></li> <li><a href="/javascript/tutorial/javascript_if_statements.cfm">JavaScript If Statements</a></li> <li><a href="/javascript/tutorial/javascript_switch_statement.cfm">JavaScript Switch Statements</a></li> <li><a href="/javascript/tutorial/javascript_while_loop.cfm">JavaScript While Loop</a></li> <li><a href="/javascript/tutorial/javascript_for_loop.cfm">JavaScript For Loop</a></li> <li><a href="/javascript/tutorial/javascript_try_catch.cfm">JavaScript Try Catch</a></li> <li><a href="/javascript/tutorial/javascript_escape_characters.cfm">JavaScript Escape Characters</a></li> <li><a href="/javascript/tutorial/javascript_void_0.cfm">JavaScript Void(0)</a></li> <li><a href="/javascript/tutorial/javascript_cookies.cfm">JavaScript Cookies</a></li> <li><a href="/javascript/tutorial/javascript_date_and_time.cfm">JavaScript Date and Time</a></li> <li><a href="/javascript/tutorial/javascript_arrays.cfm">JavaScript Arrays</a></li> <li><a href="/javascript/tutorial/two_dimensional_arrays.cfm">Two Dimensional Arrays</a></li> <li><a href="/javascript/tutorial/innerhtml_in_javascript.cfm">JavaScript innerHTML</a></li> <li><a href="/javascript/tutorial/unobtrusive_javascript.cfm">Unobtrusive JavaScript</a></li> <li><a href="/javascript/tutorial/javascript_summary.cfm">JavaScript Summary</a></li> </ul> </li> <li><h3>JavaScript Reference</h3> <ul> <li><a href="/javascript/examples/" title="">JavaScript Examples</a></li> <li><a href="/javascript/javascript_reserved_words.cfm" title="">JavaScript Reserved Words</a></li> <li><a href="/javascript/javascript_event_handlers.cfm" title="Introduction to the 12 JavaScript event handlers">JavaScript Event Handlers</a></li> <li><a href="/javascript/javascript_date_and_time_functions.cfm" title="Full listing of all JavaScript methods for dealing with date and time.">JavaScript Date and Time Functions</a></li> </ul> <li><h3>jQuery</h3> <ul> <li><a href="/jquery/tutorial/" title="">jQuery Tutorial</a></li> <li><a href="/jquery/examples/" title="">jQuery Examples</a></li> </ul> </li> <li><h3>JSON</h3> <ul> <li><a href="/json/tutorial/" title="Data format for exchanging data between applications and different environments.">JSON Tutorial</a></li> </ul> <li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

What Does JavaScript Void(0) Mean?