how to get the <a>under the <p>-CodePudding

I'm trying to get the a tag under the specific p tag.

I have tried this but is not working. I am trying to change the CSS style of the link part to red color and came with a red dot line when hovering the line will become solid.

var font_8 = document.getElementsByClassName('font_8');var elements = font_8.getElementsByTagName('a');

html:

    <p  style="font-size:16px">text text text text<br>
<span style="text-decoration:underline"><a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a></span>（text）</p>
    <p  style="font-size:16px">text text text text<br>
<span style="text-decoration:underline"><a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a></span>（text）</p>

js:

 <script>
    const styles = {
      textDecoration: 'none',
      color: 'red',
      borderBottom: '2px dotted currentColor',
    }
    
    function getElements() {
      var font_8 = document.getElementsByClassName('font_8');var elements = font_8.getElementsByTagName('a');
      var len = elements.length;
      for (let i = 0; i < len; i  ) {
          Object.keys(styles).forEach((key)=>{
            elements[i].style[key]=styles[key]
          })
      }
      for (let i = 0; i < len; i  ){
          elements[i].addEventListener('mouseover', function() {
            elements[i].style.borderBottom= '2px solid currentColor';
          })
          elements[i].addEventListener('mouseout', function() {
            Object.keys(styles).forEach((key)=>{
              elements[i].style[key]=styles[key]
            })
          })
      }
    }
    
    getElements()
    </script>

CodePudding user response：

Using JavaScript just to learn, this is my solution with a query selector:

const styles = {
  textDecoration: 'none',
  color: 'red',
  borderBottom: '2px dotted currentColor',
}
const normalStyle = 'dotted'
const hoverStyle = 'solid'

function applyStylesAndHover() {
  // querySelectorAll allows you to basically use a CSS selector in your JS
  const elements = document.querySelectorAll('.font_8 a');

  elements.forEach((element) => {
    Object.keys(styles).forEach((key) => {
      element.style[key] = styles[key]
    })
    element.addEventListener('mouseover', function() {
      element.style.borderBottomStyle = normalStyle;
    })
    element.addEventListener('mouseout', function() {
      element.style.borderBottomStyle = hoverStyle;
    })
  })
}
applyStylesAndHover()

<p  style="font-size:16px">
  text text text text
  <br>
  <span style="text-decoration:underline">
  <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a>
  </span>（text)
</p>
<p  style="font-size:16px">
  text text text text
  <br>
  <span>
  <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a>
  </span>（text)
</p>

Although To style the <a> on hover you do not need JavaScript. CSS is perfect for this:

.font_8 a { /* An <a> inside of an element with the class of font_8 */
  color: red;
  text-decoration: none;
  border-bottom: 2px solid red;
}

.font_8 a:hover { /* An <a> that is being hovered inside of an element with the class of font_8 */
  border-bottom-style: dotted;
}

<p  style="font-size:16px">
  text text text text
  <br>
  <span style="text-decoration:underline">
  <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a>
  </span>（text)
</p>
<p  style="font-size:16px">
  text text text text
  <br>
  <span>
  <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a>
  </span>（text)
</p>

CodePudding user response：

One problem i found here is you are tring to get <a> using font_8.getElementsByTagName('a'); which will not work. u will need to assign id to the a tag and get it by using

var element = document..getElementsById('myAncor');

and To move it inside p tag u will need to append the element to font_8 using .appenChild().

edit: sry i misunderstood ur question.

to do this with JS use

var element= font_8[0].children[1].children[0];
element.addEventListener(
 // your core
)

var elements= document.querySelectorAll('.font_8 a');
//Your code
elements[i].addEventListener(
 // your core
)