Making JS items links to other pages-CodePudding

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)`;
      },
      onm ouseMove() {
        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;
          });
        }
      },
      onm ouseLeave() {
        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 >
      <nav >
        <ul >
          <li v-for="item in items" ><a >{{ item.page }}</a></li>
        </ul>
      </nav>
    </header>
<div >
  <div  ref="cursorPointer"></div>
  <div  ref="cursorFollow"></div>
</div>
</div>

</head>

<!-- content-->

<body>


<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></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>

CodePudding user response：

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)