Question

0

182

Views

how to get child element using inline javascript in htmltag

Here is the code

<a href="http://example.com/example-2pp.html" onmouseover="alert(this.children[1].src)">
    <span class="product-image-container product-image-container-1198" style="width: 388px;">
        <span class="product-image-wrapper" style="padding-bottom: 125%;">
            <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&amp;height=485&amp;store=example_en&amp;image-type=small_image">
        </span>
    </span>
</a>

I want to get the img src using this line of script

onmouseover="alert(this.children[1].src)">

is it possible to do that?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T10:06:31.404Z

Use Element.querySelector
Use the "mouseenter" Event name
PS: Avoid using inline on* or style attributes. JS and CSS should be in their respective tags or files!

<a href="http://example.com/example-2pp.html" onmouseenter="alert(this.querySelector('img')?.src)">
  <span class="product-image-container product-image-container-1198" style="width: 388px;">
        <span class="product-image-wrapper" style="padding-bottom: 125%;">
            <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&amp;height=485&amp;store=example_en&amp;image-type=small_image">
        </span>
  </span>
</a>

Don't use inline on* and style attributes. Rather:

const ELS_prodLink = document.querySelectorAll(".product-link");

ELS_prodLink.forEach((EL_pr) => {
  EL_pr.addEventListener("mouseenter", () => {
    
    const EL_img = EL_pr.querySelector(".product-image-photo");
    console.log(EL_img.src);
    
  });
});

.product-image-container { width: 388px; }
.product-image-wrapper { padding-bottom: 125% }

<a class="product-link" href="http://example.com/example-2pp.html">
  <span class="product-image-container product-image-container-1198">
     <span class="product-image-wrapper" >
        <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&amp;height=485&amp;store=example_en&amp;image-type=small_image">
    </span>
  </span>
</a>

0

182

how to get child element using inline javascript in htmltag

1 answers

0

Find remote jobs

Andres GPT