Making JS items links to other pages

Issue

So I’m using some code from CodePen to make my nagivation buttons as well as my cursor. All of the button creation seems to happen within the JavaScript file, however. I want to add links to each of the buttons to redirect to separate HTML pages. I’m hoping to find a way to do it within the JS file, but all solutions are welcome!

Also, I’m aware this may be a very silly question but I’m still new to web development so bear with me! I’m going to post snippets of the HTML and JS files. I can’t include the CSS snippet because the file is much too large.

The website is ryanhursh.xyz for reference of how it’s built.

const app = Vue.createApp({
    data() {
      return {
        items: [{ page: "about" }, { page: "works" }, { page: "contact" }],
        cursorPosX: 960,
        cursorPosY: 540,
        cursorFollowActiveBuffer: 16,
        buttonHoverFlag: false
      };
    },
    mounted() {
      this.cursorPointer = this.$refs.cursorPointer;
      this.cursorFollow = this.$refs.cursorFollow;
      this.button = document.querySelectorAll(".js-button");
  
      window.addEventListener("mousemove", (e) => {
        if (this.buttonHoverFlag === true) {
          return;
        }
        this.mouseMoveCursor(this.cursorPointer, e, 1.0);
        this.mouseMoveCursor(this.cursorFollow, e, 1.0);
      });
  
      this.onMouseMove();
      this.onMouseLeave();
    },
    methods: {
      mouseMoveCursor(element, event, friction) {
        this.cursorPosX += (event.clientX - this.cursorPosX) * friction;
        this.cursorPosY += (event.clientY - this.cursorPosY) * friction;
        element.style.transform = `translate(${
          this.cursorPosX - element.clientWidth / 2
        }px,${this.cursorPosY - element.clientHeight / 2}px)`;
      },
      onMouseMove() {
        for (let i = 0; i < this.button.length; i++) {
          this.button[i].addEventListener("mousemove", (e) => {
            this.buttonHoverFlag = true;
            this.cursorPointer.style.backgroundColor = "transparent";
            this.cursorFollow.style.transform = `translate(${
              e.target.getBoundingClientRect().left -
              this.cursorFollowActiveBuffer
            }px,${
              e.target.getBoundingClientRect().top - this.cursorFollowActiveBuffer
            }px)`;
            this.cursorFollow.style.width =
              e.target.getBoundingClientRect().width + "px";
            this.cursorFollow.style.height =
              e.target.getBoundingClientRect().height + "px";
            this.cursorFollow.style.padding =
              this.cursorFollowActiveBuffer + "px";
            this.cursorFollow.style.borderRadius = 0;
          });
        }
      },
      onMouseLeave() {
        for (let i = 0; i < this.button.length; i++) {
          this.button[i].addEventListener("mouseleave", () => {
            this.buttonHoverFlag = false;
            this.cursorPointer.style.backgroundColor = "#fff";
            this.cursorFollow.style.width = 10 + "px";
            this.cursorFollow.style.height = 10 + "px";
            this.cursorFollow.style.padding = 32 + "px";
            this.cursorFollow.style.borderRadius = "100%";
          });
        }
      }
    }
  });
  
  app.mount("#app");
 
  

  
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Ryan R. Hursh</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="app">
    <header class="header">
      <nav class="header__nav">
        <ul class="header__list">
          <li v-for="item in items" class="header__item"><a class="button js-button">{{ item.page }}</a></li>
        </ul>
      </nav>
    </header>
<div class="cursor">
  <div class="cursor__pointer" ref="cursorPointer"></div>
  <div class="cursor__follow" ref="cursorFollow"></div>
</div>
</div>

</head>

<!-- content-->

<body>


<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>


 <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  <!-- 
  <div id='stars'></div>
  <div id='stars2'></div>
  <div id='stars3'></div>
 -->
  <div id='title'>
    <span>
      Ryan R. Hursh
    </span>
    <br>
    <span>
      HTML, CSS, JavaScript
    </span>
  </div>

<!-- end content-->
<!-- embedded scripts -->

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://unpkg.com/vue@next'></script>
  <script  src="./script.js"></script>
</script>

<!-- end scripts -->
</body>
</html>

Solution

For buttons that take you to other HTML pages, you can just do:

Html:

<button id="whateveruwant" onclick="whateverfunctionuwant()">text here</button>

The JS is also simple:

function whateverfunctionuwant() {
 location.href = "whateverhtmlpageuwant.html"
}

So then the button will direct you to a different HTML page. If Location doesn’t work, try Window.href. The Id is for CSS purposes if you wanted to change its appearance and location of it. If you still don’t understand, then just go to W3 Schools and search for how to make a button change to another HTML page. (BTW JUST CHANGE THE STUFF THAT I LEFT AS WHATEVER FUNCTION U WANT TO WHAT YOU WANT)

Answered By – Coding4life

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.