CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbutton
freya
freya

Reputation: 41

Problems linking a bootstrap button to a webpage

I am trying to link a button to a web page. This is the code that I have but when I click the button it doesn't direct to that page.

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown"
<a href= "HomePage.html">    
  Home Page ▼ </a>
</button>

Upvotes: 2

Views: 42

Answers (4)

Yago Azedias
Yago Azedias

Reputation: 4868

Maybe is because you forgot to close the button tag

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown" <!-- ?? Where is your ">" ??-->

Try this:

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown">
      <a href= "HomePage.html">Home Page</a>
</button>

Upvotes: 0

Luiz Gon&#231;alves
Luiz Gon&#231;alves

Reputation: 547

Button are not links

You can use just a <a> instead

<a href="HomePage.html" class="btn2 btn-primary btn-lg dropdown-toggle" id="WebPast" data-toggle="dropdown">Home Page ▼</a>

Works as well :)

Upvotes: 0

Badacadabra
Badacadabra

Reputation: 8497

Your problem is NOT related to the typo on <button>. I have tested your code and it does not work, indeed. In fact, your button wraps your link, so when you click the button, the default click event is not triggered on your <a> element. If you want to keep this HTML structure, you can use JavaScript to make it work:

document.getElementById('WebPast').addEventListener('click', handler, true);

function handler(e) {
  location.href = e.target.children[0].href;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <button class="btn2 btn-primary btn-lg dropdown-toggle" type="button" id="WebPast" data-toggle="dropdown">
    <a href="http://stackoverflow.com">Home Page ▼</a>
  </button>
</body>
</html>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You've a typo, you're missing > at the end of button tag :

<button class="btn2 btn-primary btn-lg dropdown-toggle".....toggle="dropdown">
_____________________________________________________________________________^

Hope this helps.

<button class="btn2 btn-primary btn-lg dropdown-toggle" type="button" id="WebPast" data-toggle="dropdown">
<a href= "HomePage.html">    
Home Page ▼ </a>
</button>

Upvotes: 2

Related Questions