login
I've seen such hrefs many times, but I don't know what exactly that means.
The void operator evaluates the given
expression and then returns undefined.
The void operator is often used merely
to obtain the undefined primitive
value, usually using “void(0)” (which
is equivalent to “void 0”). In these
cases, the global variable undefined
can be used instead (assuming it has
not been assigned to a non-default
value).
An explanation is provided here: void operator.
The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.
In addition to the technical answer, javascript:void means the author is Doing It Wrong.
There is no good reason to use a javascript: pseudo-URL(*). In practice it will cause confusion or errors should anyone try things like ‘bookmark link’, ‘open link in a new tab’, and so on. This happens quite a lot now people have got used to middle-click-for-new-tab: it looks like a link, you want to read it in a new tab, but it turns out to be not a real link at all, and gives unwanted results like a blank page or a JS error when middle-clicked.
<a href="#"> is a common alternative which might arguably be less bad. However you must remember to return false from your onclick event handler to prevent the link being followed and scrolling up to the top of the page.
In some cases there may be an actual useful place to point the link to. For example if you have a control you can click on that opens up a previously-hidden <div id="foo">, it makes some sense to use <a href="#foo"> to link to it. Or if there is a non-JavaScript way of doing the same thing (for example, ‘thispage.php?show=foo’ that sets foo visible to begin with), you can link to that.
Otherwise, if a link points only to some script, it is not really a link and should not be marked up as such. The usual approach would be to add the onclick to a <span>, <div>, or an <a> without an href and style it in some way to make it clear you can click on it. This is what StackOverflow [did at the time of writing; now it uses href="#"].
The disadvantage of this is that you lose keyboard control, since you can't tab onto a span/div/bare-a or activate it with space. Whether this is actually a disadvantage depends on what sort of action the element is intended to take. You can, with some effort, attempt to mimic the keyboard interactability by adding a tabIndex to the element, and listening for a Space keypress. But it's never going to 100% reproduce the real browser behaviour, not least because different browsers can respond to the keyboard differently (not to mention non-visual browsers).
If you really want an element that isn't a link but which can be activated as normal by mouse or keyboard, what you want is a <button type="button"> (or <input type="button"> is just as good, for simple textual contents). You can always use CSS to restyle it so it looks more like a link than a button, if you want. But since it behaves like a button, that's how really you should mark it up.
(*: in site authoring, anyway. Obviously they are useful for bookmarklets. javascript: pseudo-URLs are a conceptual bizarreness: a locator that doesn't point to a location, but instead calls active code inside the current location. They have caused massive security problems for both browsers and webapps, and should never have been invented by Netscape.)
It means it’ll do nothing. It’s an attempt to have the link not ‘navigate’ anywhere. But it’s not the right way.
You should actually just return false in the onclick event, like so:
hello
Typically it’s used if the link is doing some ‘JavaScript-y’ thing. Like posting an AJAX form, or swapping an image, or whatever. In that case you just make whatever function is being called return false.
To make your website completely awesome, however, generally you’ll include a link that does the same action, if the person browsing it chooses not to run JavaScript.
<a href="backup_page_displaying_image.aspx"
onclick="return coolImageDisplayFunction();">hello</a>
It is a very popular method of adding JavaScript functions to HTML links.For example: the [Print] links that you see on many webpages are written like this:
Print
Why do we need href while onclick alone can get the job done? Because when users hover over the text 'Print' when there's no href, the cursor will change to a caret (ꕯ) instead of a pointer (👆). Only having href on an a tag validates it as a hyperlink.
An alternative to href="javascript:void(0);", is the use of href="#". This alternative doesn't require JavaScript to be turned on in the user's browser, so it is more compatible.
There is a huge difference in the behaviour of # vs javascript:void(0);.
# scrolls you to the top of the page but javascript:void(0); does not.
This is very important if you are coding dynamic pages because the user does not want to go back to the top when they click a link on the page.
You should always have an href on your a tags. Calling a JavaScript function that returns 'undefined' will do just fine. So will linking to '#'.
Anchor tags in Internet Explorer 6 without an href do not get the a:hover style applied.
Yes, it is terrible and a minor crime against humanity, but then again so is Internet Explorer 6 in general.
I hope this helps.
Internet Explorer 6 is actually a major crime against humanity.
It's worth mentioning that you'll sometimes see void 0 when checking for undefined, simply because it requires fewer characters.
For example:
if (something === undefined) {
doSomething();
}
Compared to:
if (something === void 0) {
doSomething();
}
Some minification methods replace undefined with void 0 for this reason.
Usage of javascript:void(0) means that the author of the HTML is misusing the anchor element in place of the button element.
Anchor tags are often abused with the onclick event to create
pseudo-buttons by setting href to "#" or "javascript:void(0)" to
prevent the page from refreshing. These values cause unexpected
behavior when copying/dragging links, opening links in a new
tabs/windows, bookmarking, and when JavaScript is still downloading,
errors out, or is disabled. This also conveys incorrect semantics to
assistive technologies (e.g., screen readers). In these cases, it is
recommended to use a <button> instead. In general you should only use
an anchor for navigation using a proper URL.
Source: MDN's <a> Page.
Web Developers use javascript:void(0) because it is the easiest way to prevent the default behavior of a tag. void(*anything*) returns undefined and it is a falsy value. and returning a falsy value is like return false in onclick event of a tag that prevents its default behavior.
So I think javascript:void(0) is the simplest way to prevent the default behavior of a tag.
void is an operator that is used to return a undefined value so the browser will not be able to load a new page.
Web browsers will try and take whatever is used as a URL and load it unless it is a JavaScript function that returns null. For example, if we click a link like this:
Click Me
then an alert message will show up without loading a new page, and that is because alert is a function that returns a null value. This means that when the browser attempts to load a new page it sees null and has nothing to load.
An important thing to note about the void operator is that it requires a value and cannot be used by itself. We should use it like this:
I am a useless link
To understand this concept one should first understand the void operator in JavaScript.
The syntax for the void operator is: void «expr» which evaluates expr and returns undefined.
If you implement void as a function, it looks as follows:
function myVoid(expr) {
return undefined;
}
This void operator has one important usage that is - discarding the result of an expression.
In some situations, it is important to return undefined as opposed to the result of an expression. Then void can be used to discard that result. One such situation involves javascript: URLs, which should be avoided for links, but are useful for bookmarklets. When you visit one of those URLs, many browsers replace the current document with the result of evaluating the URLs “content”, but only if the result isn’t undefined. Hence, if you want to open a new window without changing the currently displayed content, you can do the following:
javascript:void window.open("http://example.com/")
A link must have an href target to be specified to enable it to be a usable display object.
Most browsers will not parse advanced JavaScript in the href of an <a> element, for example:
Get element
Because the href tag in most browsers does not allow whitespace or will convert whitespace to %20 (the HEX code for space), the JavaScript interpreter will run into multiple errors.
So if you want to use an <a> element's href to execute inline JavaScript, you must specify a valid value for href first that isn't too complex (doesn't contain whitespace), and then provide the JavaScript in an event attribute tag like onClick, onMouseOver, onMouseOut, etc.
The typical answer is to do something like this:
Get element
This works fine but it makes the page scroll to the top because the # in the href tells the browser to do this.
Placing a # in the <a> element's href specifies the root anchor, which is by default the top of the page, but you can specify a different location by specifying the name attribute inside an <a> element.
<a name="middleOfPage"></a>
You can then change your <a> element's href to jump to middleOfPage and execute the JavaScript in the onClick event:
Get element
There will be many times where you do not want that link jumping around, so you can do two things:
Get element
Now it will go nowhere when clicked, but it could cause the page to re-centre itself from its current viewport.
The best way to use in-line javascript using an <a> element's href, but without having to do any of the above is JavaScript:void(0);:
Get element
This tells the browser no to go anywhere, but instead execute the JavaScript:void(0); function in the href because it contains no whitespace, and will not be parsed as a URL. It will instead be run by the compiler.
void is a keyword which, when supplied with a parameter of 0 returns undefined, which does not use any more resources to handle a return value that would occur without specifying the 0 (it is more memory-management/performance friendly).
The next thing that happens is the onClick gets executed. The page does not move, nothing happens display-wise.
The void operator evaluates the given expression and then returns undefined.
It avoids refreshing the page.
From what I've seen, the void operator has 3 common uses in JavaScript. The one that you're referring to, <a href="javascript:void(0)"> is a common trick to make an <a> tag a no-op. Some browsers treat <a> tags differently based on whether they have a href , so this is a way to create a link with a href that does nothing.
The void operator is a unary operator that takes an argument and returns undefined. So var x = void 42; means x === undefined. This is useful because, outside of strict mode, undefined is actually a valid variable name. So some JavaScript developers use void 0 instead of undefined. In theory, you could also do <a href="javascript:undefined"> and it would so the same thing as void(0).
I have an element defined as class, and in the render() method I'm trying to give an element a custom attribute data-activates with an id. However, in the resulting html I just see the plaintext of the expression, either one of the following:
data-activates="{this.state._id}"
data-activates="${this.state._id}"
data-activates="{id}"
data-activates="${id}"
The id is present in both props and state, and outside of the element both of them work correctly:
<a className="dropdown-button waves-effect" href="#!" data-activates="{id}">
{ id }, {this.state._id} <- works here
</a>
For some reason React doesn't resolve expressions within the attribute and I need that for the dropdown to work. What am I doing wrong?
Bonus point for a better way to implement dropdown in React, if there is no way to make this code work.
You have to go into JavaScript land inside your JSX with the help of {}. That way you can use any expression you like in the JSX.
Example
<a
className="dropdown-button waves-effect"
href="#"
data-activates={this.state._id}
>
Test
</a>
You should not wrap data attributes inside QUOTES
data-activates={this.state._id}
data-activates={id}
This documentation clears everything check the documentation
Make sure you have tried the following:
<a data-activates={this.state._id}>...</a>
<a data-activates={id}>...</a>
Please bear in mind that JSX adheres to JS syntax first. So inside the curly brackets, you still can do interpolation within tildes (`):
<a data-activates={`my-id-${id}`}>...</a>
Cheers,
Don't use a dash. Use lowerCamelCase instead. React doesn't recognize elements with a dash in the name as a prop. So, instead of data-activates={id}, use dataActivates={id}.
Why doesn't this work in a browser?
<input type="button" id="x">
Click
Yes, I know that I can use onClick to call a function and put my code there, but is there a way to use 'javascript:' with the href attribute to do simple javascript functions like changing a value?
Assignment "returns" the value assigned. Returning any kind of value from a javascript: link indicates to the browser that it should replace the document with that value.
Usually you might see javascript:void(stuff goes here) to suppress the return value.
You already seem to be aware of why you shouldn't do this, though. onClick event handler is a step in the right direction, but really it should be attached externally.
Yes, that should work and as you know onclick is another easy approach to do it;
However if you still want to it with href you may try this -
(this might look unwillingly big :)
<input type="button" id="x">
Click
what is the difference between
<a onclick="someFunction">
and
<a onclick="someFunction()">
One uses the parenthesis and not the other, but what are the differences of using either? What is the "correct" option? And what happens if i dont use any href attribute?
As far as I know, in javascript, using something = someFunc(); assigns the return value of that function to the something variable. And using something = someFunc; assigns the function directly (not its result) to that variable (And it's mostly used to assign functions to events). e.g. I can assign a function to a onclick event.
But what I don't understand is what happens when using either in some html element inline event, as in the examples, since the assignation is not to a javascript variable, but to an html attribute, which happens to be an event? Please explain.
And also, is there a difference on assigning a inline onclick function to an anchor (a) that to other elements (e.g. span div label etc)? Do they have the same effect?
Sidenote:
I've been reading here about how to run a function when clicking on a link, and I already understood is that is should not be done "inline", but instead using unobtrusive javascript. (I mention it to avoid debate about that), but in the examples I've seen they don't mention the difference of both options I mention when doing it inline.
Edit: This question was made because here they gave an answer which doesn't use the parenthesis in the function for the event, and nobody mentioned the parenthesis were needed, so I assume it is valid. yet I don't know what is the difference of using () or not.
One uses the parenthesis and not the other, but what are the differences of using either?
<a onclick="someFunction"> won't do anything. The parenthesis cause a function to be called.
Having a statement consisting of nothing but an identifier (be it a function name, variable, or whatever) won't do anything (except throw a reference error if the variable doesn't exist).
And what happens if i dont use any href attribute?
Then I'd question why you were using an <a> element in the first place.
And also, is there a difference on assigning a inline onclick function to an anchor (a) that to other elements (e.g. span div label etc)?
Only that they aren't (by default) focusable elements (nor is an a element without an href attribute), so the click event couldn't be triggered by tabbing to the element and pressing enter. If you want an element that will do something with JS when triggered, and you don't have a sensible fallback for when JS isn't available, use a button.
The value of an event handler attribute is a sequence of Javascript statements, not an expression.
It isn't assigning a function value to the property; it's a piece of code to execute at that event.
Leaving out the parentheses, results in an expression statement that has no effect.
when writing inline on click functions, we assigning the code to be executed in the form of string on click of the element.
It is equivalent to eval('someFunction()');
we cannot write on click='someFunction' since it will be equivalent to eval('someFunction') which would do nothing.
if you intend to bind a click handler to an anchor tag, dont forget to add a href='#' attribute to the anchor tag.
There is no difference between assigning a click handler to span or divs as compared to anchor tag.
If I have a some javascript in an anchor's href attribute:
<a href="javascript:alert('hello!')">
Is there a way I can get a reference to the DOM element that was clicked when the script executes? I mean, I know I could do
<a href="javascript:alert('hello from '+document.getElementById('thisAnchor'))" id="thisAnchor">
But I was hoping for something more like
<a href="javascript:alert('hello from '+target)">
Something like this?
Example: http://jsfiddle.net/TTzDb/
me
Using onclick, this will refer to the element that received the event.
Move the JavaScript to the onclick="yourJavaScriptHere" attribute. Then you can use the 'this' keyword to reference your anchor. So
some text
Although, that isn't very meaning. Additionally, it is a better practice to separate your JavaScript from your HTML to build a more maintainable website.
Yes, and the answer is this which refers to current DOM element:
Click me
EDIT:
Of course as bobince mentioned (see comments) that won't work as excepted. The correct form is:
Click me