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:
Hint:
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 ?
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.
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).
onclick does trigger first, the href only goes once onclick has returned!
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With