1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5.00 out of 5)

Use A JavaScript Button As A Link Properly

To use a JavaScript button as a link properly you need to start off with an HTML button element. This is commonly referred to as the button tag in HTML. Below is the code example for a button element.

 <button></button>

If you put the button tag element in a webpage it will look like this.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
Button Tag Element

Button Tag Element

You will notice that it does not have any text associated with it. Put text in the button between the center carrots.

<button>Button</button>

This will give you a button that looks like this.

Subscribe To My YouTube Channel:
Button Add Text

Button Add Text

Now add a link element to the button like this.

<button onclick="window.location='http://www.website.com';">Button Link</button>

Another Method Using  A HTML Button Tag As A Link

You can use an onClick method with script tags to accomplish this task. See the codes below for JavaScript and jQuery.

OnClick Method With Script Tags

Use In Javascript

<!--script>
    function mylink(){
        window.location='http://www.website.com';
    }
</script !-->
<button onClick="mylink();">Button Link</button>

Use in jQuery

<button id="webLink">Visit Page Now</button>
<!--script>
$('#webLink').click(function() {
  window.location='http://www.website.com';
}); </script !-->

Use in Older jQuery

<button id="webLink">Visit Page Now</button>

$jquery('#webLink').click(function() {
  window.location='http://www.website.com';
});

Conclusion: Use A JavaScript Button As A Link Properly

There are many other things that you can do with the button tag element. The button tag is HTML however the action that we assign to the button is JavaScript.

This should be used properly. This method is not good for SEO. Why? Because as it is described above it does not have SEO tags.  Use regular anchor links with SEO tags for search engines.

Use A JavaScript Button As A Link Properly was last modified: December 27th, 2015 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
Use-A-JavaScript-Button-As-A-Link-Properly

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.