javascript:void(0) meaning and usage examples

javascript:void(0) meaning and usage examples

Introduction to void keyword

First of all, the void keyword is a very important keyword in JavaScript. This operator specifies that an expression is to be calculated or run, but no value is returned.

Syntax format:

  • void func()
  • void(func())

Example 1

When clicking the hyperlink, nothing happens

<!-- 1. When the user links, void(0) is calculated as 0, and the user's click will not have any effect-->
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >Click here and nothing will happen</a><br>

Example 2

Execute the code in the void operator

<!-- 2. Execute the code in the void() operator -->
    <a href="javascript:void(alert('You're really obedient!!! Hahaha!!!'))" rel="external nofollow" >Click me to pop up a warning box!!!</a><br>
    <a href="javascript:void(console.log('You're really obedient!!! Hahaha!!!'))" rel="external nofollow" >Click me to output to the console!!!</a><br>

Example 3

Computing Arithmetic with Void Operators

html:

<button type="button">Click me</button>

js:

<script type="text/javascript">
        document.querySelector('button').addEventListener('click', function () {
            var a, b, c, d;
            a = void(b = 2, c = 3);
            console.log('a => ' + a);
            console.log('b => ' + b);
            console.log('c => ' + c);
            console.log('d => ' + d);
        });
    </script>

Console output:

Obviously, 2 is assigned to a, 3 is assigned to b, and a is just defined like d, so it is undefined.

# Difference from javascript:void(0):

#You can jump to the destination with the set id

javascript:void(0) stays where it is, motionless, we call it a "dead link"

As in the following example:

<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >You can click, I won’t move anyway, hehehe! ! ! </a><br>
    <a href="#destination" rel="external nofollow" >Click me to jump</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h2 id="destination">Destination</h2>
  • When I click the first link, nothing happens.
  • When you click the second link, you will be redirected to the location of the specified ID (the bottom of the page)

This concludes this article about the meaning and usage examples of javascript:void(0). I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Explanation of the meaning of javascript void (0) and the difference between it and "#"
  • Detailed explanation of the usage of javascript:void(0) in js
  • javascript:void(0) function example
  • A brief discussion on the difference between href=# and href=javascript:void(0)

<<:  Sharing of research experience on using characters instead of rounded corners and sharp corners

>>:  Detailed explanation of MYSQL stored procedure comments

Recommend

Six ways to increase your website speed

1. Replace your .js library file address with the...

How to create (CREATE PROCEDURE) and call (CALL) a MySQL stored procedure and how to create (DECLARE) and assign (SET) a variable

This article uses examples to describe how to cre...

Node+Express test server performance

Table of contents 1 Test Environment 1.1 Server H...

Node uses async_hooks module for request tracking

The async_hooks module is an experimental API off...

A complete list of meta tag settings for mobile devices

Preface When I was studying the front end before,...

Web Design Experience: 5 Excellent Web Design Concepts Full Analysis (Pictures)

Unlike other types of design, web design has been ...

Detailed process of deploying Docker to WSL2 in IDEA

The local environment is Windows 10 + WSL2 (Ubunt...

How to design high-quality web pages Experience in designing high-quality web pages (pictures and text)

With the increasing number of open platforms, the ...

Docker configuration Alibaba Cloud Container Service operation

Configuring Alibaba Cloud Docker Container Servic...

mysql 5.6.23 winx64.zip installation detailed tutorial

For detailed documentation on installing the comp...

Summary of the differences between global objects in nodejs and browsers

In Node.js, a .js file is a complete scope (modul...

Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL

If you want to solve the slow problem once and fo...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

JavaScript implements checkbox selection function

This article example shares the specific code of ...

Detailed tutorial on installing mysql 8.0.13 (rpm) on Centos7

yum or rpm? The yum installation method is very c...