create hyperlinks based on div clicks in HTML using JavaScript

Question

create hyperlinks based on div clicks in HTML using JavaScript

Hey there! I'm working on a cool animation for my page that involves a star fade effect. After the animation, I want to open a link to another page on my site.

Imagine I have 3 cards on my page, and when I click on any of them, I want the same animation to play, followed by a 1500ms delay, and then the new page opens in the same tab.

I'm thinking of setting the link information in the HTML using either the a href tag or window.location, and then using a JavaScript query to retrieve that information.

I apologize if my explanation is a bit unclear, I'm still very new to JavaScript and learning as I go!

HTML

<div class="link1" window.location="index1.html"></div>           
<div class="link2" window.location="index2.html"></div>
<div class="link3" window.location="index3.html"></div>

Javascript

open() {

this.isOpened = true;

this.elm.classList.add('is-opened');

this.timeStart = Date.now();

this.renderLoop();

setTimeout(function() { window.location = document.getElementsByName('window.location')}, 1500);

  }

javascript

Answer 1

Answer №1

Here is a method to assign URLs to the attribute data-link. For example:

const hyperlinks = document.querySelectorAll('.hyperlink');
for(var hyperlink of hyperlinks) {
  hyperlink.addEventListener('click', function(event) {  
    setTimeout(function() {
      window.open(event.target.getAttribute('data-link'), '_blank');
    }, 1500)
  })
}

<div class="hyperlink" data-link="page1.html">Page 1</div>
<div class="hyperlink" data-link="page2.html">Page 2</div>
<div class="hyperlink" data-link="page3.html">Page 3</div>

If you prefer to open the links in new tabs, make sure that 'allow-popups' permission is granted in most browsers. Otherwise, simply replace

window.open(event.target.getAttribute('data-link'), '_blank');

with

window.location = event.target.getAttribute('data-link');

Answer 2

Here is a method to assign URLs to the attribute data-link. For example:

const hyperlinks = document.querySelectorAll('.hyperlink');
for(var hyperlink of hyperlinks) {
  hyperlink.addEventListener('click', function(event) {  
    setTimeout(function() {
      window.open(event.target.getAttribute('data-link'), '_blank');
    }, 1500)
  })
}

<div class="hyperlink" data-link="page1.html">Page 1</div>
<div class="hyperlink" data-link="page2.html">Page 2</div>
<div class="hyperlink" data-link="page3.html">Page 3</div>

If you prefer to open the links in new tabs, make sure that 'allow-popups' permission is granted in most browsers. Otherwise, simply replace

window.open(event.target.getAttribute('data-link'), '_blank');

with

window.location = event.target.getAttribute('data-link');

Answer 3

Answer №2

When defining an attribute, ensure you reference it correctly as name - using "window.location" and document.getElementsByName. Remember that document.getElementsByName returns an array, so you must access it as document.getElementsByName[0]. Additionally, avoid naming conflicts by using a different name instead of the predefined method "open", and call it upon a click event on the divs.
To achieve your desired outcome, consider the following implementation:

function openLink(element) {
  // Implement other necessary animation tasks
setTimeout(function() { 
  window.location = element.getAttribute("data-location");}, 1500); // element refers to the div element, retrieving the data-location attribute containing the URL to open
  }

<div class="link1" data-location="index1.html" onclick="openLink(this)">asdas</div>           
<div class="link2" data-location="index2.html" onclick="openLink(this)"></div>
<div class="link3" data-location="index3.html" onclick="openLink(this)"></div>

Visit the provided fiddle link for a demonstration: https://codepen.io/ajanth2012/pen/MXaPpp

Answer 4

When defining an attribute, ensure you reference it correctly as name - using "window.location" and document.getElementsByName. Remember that document.getElementsByName returns an array, so you must access it as document.getElementsByName[0]. Additionally, avoid naming conflicts by using a different name instead of the predefined method "open", and call it upon a click event on the divs.
To achieve your desired outcome, consider the following implementation:

function openLink(element) {
  // Implement other necessary animation tasks
setTimeout(function() { 
  window.location = element.getAttribute("data-location");}, 1500); // element refers to the div element, retrieving the data-location attribute containing the URL to open
  }

<div class="link1" data-location="index1.html" onclick="openLink(this)">asdas</div>           
<div class="link2" data-location="index2.html" onclick="openLink(this)"></div>
<div class="link3" data-location="index3.html" onclick="openLink(this)"></div>

Visit the provided fiddle link for a demonstration: https://codepen.io/ajanth2012/pen/MXaPpp

create hyperlinks based on div clicks in HTML using JavaScript

HTML

Javascript

Answer №1

Answer №2

Similar questions

How can an array of file paths be transformed into a tree structure?

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

Is it necessary for NPM to execute scripts labeled as dependencies during the npm i command execution?

Verifying the user's email and password for authentication

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Checking the status of a Cisco Jabber user using JavaScript

Angular allows for dynamic sourcing of iframes

Looking for assistance in streamlining the code

Submitting forms using Ajax within a modal pop-up box

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

Whenever I use NextJS's <Link> component, I always end up getting redirected to a

spring fails to run javascript

Utilizing an AngularJS factory to retrieve JSON data from the server

Issue with highlighting when one string overlaps with another

Wait for a for loop to finish before triggering a function in Node.js

What steps can a web developer take to view user console errors?

Is there a way to eliminate spaces from a string using react-native?

AngularJS: The dynamic setting for the stylesheet link tag initiates the request prematurely

Can an AJAX request continue running even after the user has moved to a different page within the website?

Add a hovering effect to images by applying the absolute positioning property