Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the difference between <button onclick=...> and <a href="#" onclick=.../>

I find many times the pages use "a" tag and want to make it like a button. it's something like this:

<a href="#" class="button" onclick="...." />

I'm confusing about why not just use "button" tag? like this:

<button onclick="....">button</button>

what is the difference between? I really want to learn it, thanks!

One more situation question:

Three "button-like < a > tag" as below:

enter image description here

Hint:

  • Different one call ajax then get different period record
  • Need to use onclick="location.replace()" because back to last page smoothly.

Original code:

<a href="url" class="btn" >Today</a> 

I have changed to:

<a href="#" onclick="location.replace(url)" class="btn" >Today</a> 

Consider about:

<button onclick="location.replace(url)">Today</button>

What will you do in this situation? Is any incorrect to use button tag ?

like image 206
Sing Avatar asked Oct 30 '14 08:10

Sing


People also ask

What is the difference between href and onclick?

In the href also serves keyboard navigation without the mouse. If your website is required to function without Javascript then you have to use onclick so the href can have a link in it. Adding the action in a separate Javascript file fails to keep code & data bound tightly.

Can a href use onclick?

How to make this a tag working with href and onClick? The default behavior of the <a> tag's onclick and href properties are to execute the onclick , then follow the href as long as the onclick doesn't return false , canceling the event (or the event hasn't been prevented).

Does Onclick happen before href?

onclick does trigger first, the href only goes once onclick has returned!

What is the difference between Onclick and click?

click is a function on HTML elements you can call to trigger their click handlers: element. click(); onclick is a property that reflects the onclick attribute and allows you to attach a "DOM0" handler to the element for when clicks occur: element.


1 Answers

This is basically a historical artifact.

It stems from the time when it was much easier to apply custom styling to an anchor. You could easily build auto-sized "button-looking" anchors by using more elements inside the anchor itself.

Today, with enhanced CSS options and better browser compatibility, this is not necessary. When button is the correct semantic element, you have no reason to use a instead.

So, use anchors for links to other pages. It should always have a href, rather than just using # and onclick. Now, you can still use onclick as well - just make sure that the href directs you to the same data that onclick does. This is very handy when you want to have a way for search bots to navigate your site, even though the actual users will be presented with e.g. a more responsive interface (for example, downloading the updated content through AJAX). Make sure that common methods of opening the link in a new window / tab still work (neither of ctrl+click, right-click and middle-click should execute the onclick action).

Buttons are the elements that are there to interact with the page you're currently on, whether that means doing client-side scripting, or sending a form to the server.

EDIT:

With the edit to your question, it's obvious you should simply use an anchor with a normal href. There's no reason to use either onclick or a button, and you are just making a simple hyperlink, that's what anchors are for.

like image 113
Luaan Avatar answered Sep 27 '22 19:09

Luaan