how to move focus from one anchor tag to another anchor tag?

Question

I am facing some issue while focusing sibling anchor tags .I have a parent DIV or wrapper inside that there are few DIVs (one of these divs have rh02current class).I want to focus anchor tag which is present in that DIV which have rh02current class.

Steps to reproduce.

1. Run application which have Two input field.Click on any input field.Then press TAB .
2. It goes to next input field.Then. press TAB again
3. It should go to anchor tag or <a> which parent have rh02current class.Then press TAB
4. It should go to next (anchor tag) or sibling have same parent having rh02current class.
5. I also want to do reset if click again to input field.It follow again same steps

I tried like this

     let index = 0;
          document.querySelector('#rc20p3').addEventListener('focusin', (e) => {
             console.log('-fous-')
        if(index < document.querySelector('.rh02current').querySelectorAll('a').length){
          console.log('---fous --');
          document.querySelector('.rh02current').querySelectorAll('a')[index].focus();
          index++
        }
          })
        document.querySelector('#rc20p3').addEventListener('focusout', (e) => {
        console.log('focus out')
        index =0 ;
     });

I have two issue in my code. firstly focusIn fires two times. and focus not go to next anchor tag .In my example hello anchor tag is present.Also I have tried to reset the value focus out it not works

here is my code https://codesandbox.io/s/condescending-ride-lej3r?file=/index.html:6148-6681

Answer 1

You can re-assign value when input-box is focus because in your code index value on start is 0 but next time also when you click on tab it will remain 0 so only first a tag is focus.

Demo Code :

 let index = 0; let flg_first = true; document.querySelector('#rc20p3').addEventListener('focusin', (e) => { //check if active elemnt is there inside rh02..div if (document.querySelector('.rh02current').contains(document.activeElement)) { if (index < document.querySelector('.rh02current').querySelectorAll('a').length) { document.querySelector('.rh02current').querySelectorAll('a')[index].focus(); index++; } } else { //set first `a` focus document.querySelector('.rh02current').querySelectorAll('a')[0].focus() index++; } if (index > document.querySelector('.rh02current').querySelectorAll('a').length) { document.querySelector('.rh02cnav').focus(); index = 0 //restart from here.. } }) //when input is focus..re assign value function focusFunction() { index = 0 flg_first = true; }

 <input type="text" onfocus="focusFunction()" /> <input type="text" onfocus="focusFunction()" /> <div id="rc20p3" class="rc20panel"> <div class="rh02panel rh02carousel rh02carouselinit rh02random rh02p3 rh02stopped " data-trackas="rc20:panel3" role="button"> <div class="rh02w2 rh02-slide1 bgimg rh02noscrim" data-position="0"> <div class="rh02w3"> <div class="rh02-pcontent"> <div class="rh02-logo-md"> <h2 class="rh02-ttl">Expanding the Possibilities of Hybrid Cloud with Oracle EVP Clay Magouyrk</h2> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0209-panelx-pn-olive-hybrid-ondemand" href="https://www.oracle.com/events/live/expanding-possibilities-hybrid-cloud/?source=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3&amp;intcmp=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3">Watch on demand</a></div> <div><a data-lbl="cta-0209-panelx-pn-olive-hyrbid-pr-news" href="https://www.oracle.com/news/announcement/oracle-expands-hybrid-cloud-portfolio-with-roving-edge-infrastructure-020921.html?intcmp=OHPpanelx">Oracle Hybrid Cloud news</a></div> </div> </div> </div> </div> </div> <div class="rh02w2 rh02-slide2 darktheme bgimg rh02noscrim rh02current " data-position="1" style=""> <div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl">Oracle ATP recognized in Gartner Critical Capabilities Report</h2> <div class="rh02-leadin"> <p>Oracle ranked highest in all four Use Cases in Gartner “2020 Critical Capabilities for Cloud Database Management Systems for Operational Use Cases” report.</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">Read the Gartner report</a></div> <div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">hello</a></div> </div> </div> </div> </div> </div> <div class="rh02w2 rh02-slide3 bgimg " data-position="2"> <div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl oserif">From farmer to fork</h2> <div class="rh02-leadin"> <p>Land O'Lakes relies on Oracle Cloud to power its supply chain.</p> </div> <div class="rh02-leadin">&nbsp;</div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0120-panelx-pn-cust-landolakes" href="https://www.oracle.com/customers/land-o-lakes/?intcmp=OHP0120">Learn more</a></div> </div> </div> </div> </div> </div> <div class="rh02w2 rh02-slide4 darktheme bgimg rh02noscrim " data-position="3"> <div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl rh02-longttl">Try Cloud Free Tier</h2> <div class="rh02-leadin"> <p>Oracle Cloud Free Tier lets anyone build, test, and deploy applications on Oracle Cloud—for free. Sign up once, get access to two free offers.</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-1030-panelX-free-tier-pn" href="https://www.oracle.com/cloud/free/?source=:ow:o:h:feb::OHPpn1030&amp;intcmp=:ow:o:h:feb::OHPpn1030">Start your trial today</a></div> </div> </div> </div> </div> </div> <div class="rh02w2 rh02-slide5 darktheme bgimg rh02noscrim " data-position="4"> <div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl rh02-longttl">70,000 people vaccinated in first week</h2> <div class="rh02-leadin"> <p>Oracle builds Health Management Cloud used for COVID-19 clinical trials in US</p> <p>Ghana uses the same cloud system to distribute Yellow Fever vaccine</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-1123-panelx-health-covid-pn" href="https://www.oracle.com/corporate/citizenship/health/?intcmp=OHP1123-pn" title="Learn more">Learn more</a></div> </div> </div> </div> </div> </div> <ul class="rh02nav"> <li><a class="" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li> <li><a class="o-hf rh02cnav" href="#2" title="View Slide 2 rh02cnav"><b>View Slide 2</b></a></li> <li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li> <li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li> <li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li> </ul> </div> </div>