How to redirect to another page when clicking the button on a subnav header?

Question

I am using Flask, HTML, CSS, and JS to build a website. I have a navigation bar that has a dropdown menu to other links. You can view the image here- [my navigation image ][1] [1]: https://i.stack.imgur.com/bF6no.png

As you can see it has my submenu but when I click on let's say about, it doesn't redirect me to another page.

Here is my html/js:

<div class="navbar">
  <a href="{{url_for('home_page')}}">Home</a>
  <div class="subnav">
    <button id="myButton" class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">About US</a>
        <a href="#company">PCU Vision</a>
        <a href="#company">Why PCU?</a>
      <a href="#team">Contact</a>
    </div>
  </div>
    <script><script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "{{url_for('home_page')}}";
    };
</script>

I created a function called myButton so when I click on just the About button, it will redirect me to another page, but to no avail?

I am new to HTML and js so any ideas or suggestions would help.

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Greedo, Oct 05 '20 at 13:16
The About item. Not its submenu items (about us,etc.) I alread know how to redirect with the submenu items, just not the button — James, Oct 05 '20 at 13:42

score 0 · Answer 1 · edited Oct 05 '20 at 14:10

To redirect to a page when clicking the 'About' button use 'href' before the text. Like this:

<button id="myButton" class="subnavbtn"><a href="company.html" style="text-decoration: none;">About<i class="fa fa-caret-down"></i></button>

With full code:

<div class="navbar">
  <a href="{{url_for('home_page')}}">Home</a>
  <div class="subnav">
    <button id="myButton" class="subnavbtn"><a href="https://stackoverflow.com" style="text-decoration: none;">About<i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">About US</a>
        <a href="#company">PCU Vision</a>
        <a href="#company">Why PCU?</a>
      <a href="#team">Contact</a>
    </div>
  </div>
  <script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "{{url_for('home_page')}}";
    };
  </script>

How to redirect to another page when clicking the button on a subnav header?

1 Answers1