How to get inner href inside a tag?-CodePudding

The whole element is like below :

<h2 ><a href="https://demosite.com">demo text</a></h2>

I have run this below command :

const y = document.getElementsByClassName("font120 mt0 mb10 mobfont110 lineheight20 moblineheight15")[0].innerHTML;
console.log(y);

And got the below result from it.

<a href="https://demosite.com">demo text</a>

Now I want to get href URL link, and then click on it. How can I do it using JavaScript? Also In addition to that, I want to add if else statement after this which will check if href URL changes in every 5 minutes , if it changes then it should click on href URL link otherwise it should just refresh the page.

CodePudding user response：

I think this comes close to what you want. I've tested it locally and works.

// Pick up the anchors with `querySelectorAll`
const anchors = document.querySelectorAll('.demo a');

// Assign a handler to them for when the click
// event is triggered. (Note `handleClick` returns
// a new function that is actually assigned to the
// listener because I wanted to use prevent any unnecessary
// global variables, and you can do that with closure
anchors.forEach(anchor => {
  anchor.addEventListener('click', handleClick());
});

function handleClick() {
  
  // Initialise the current href, and
  // the timer
  let current = anchors[0].href;
  let timer;
  
  // Return the function the listener will
  // be using
  return function (e) {
    
    // Stop the anchor from doing anything
    e.preventDefault();
    
    // Get the new href from the clicked element
    const { href } = e.target;
    
    // Clear any timers
    clearTimeout(timer);
    
    // And set a new timer. If the current
    // href doesn't match the one on the clicked
    // element assign the page to a new location,
    // otherwise reload the current page.
    // This time is set for five seconds for testing
    // but you change that to five minutes (60000 x 5)
    timer = setTimeout(() => {
      if (current !== href) {
        // location.assign(href);
        console.log(`Redirecting to ${href}`);
      } else {
        // location.reload();
        console.log(`Refreshing ${current}`);
      }
      current = href;
    }, 5000);
  
  }
}

<div >
  <a href="https://demosite1.com">demo text 1</a>
</div>
<div >
  <a href="https://demosite2.com">demo text 2</a>
</div>
<div >
  <a href="https://demosite3.com">demo text 3</a>
</div>

CodePudding user response：

All you need to do is look for the a element using the CSS selector h2 a and then get its href attribute:

console.log(document.querySelector("h2 a").href)

<h2 ><a href="https://demosite.com">demo text</a></h2>

In order to set up a reload of the page you could set up a

setTimeout("location.reload()",5*60*1000)

This will reload the current page after five minutes and will continue to do so, as the reloaded page will contain the same (unfired) setTimeout function.

In order to check, whether the href value has changed from one to the next reloaded version you would need to store the value in localstorage and compare it every time after the page loads with the current href value.