Replace alt text attribute of images getting text in paragraph

Question

I'm trying to get text in paragraph ".name" and put into all alt attribute in an image gallery. How can i get this text and put into attribute changing the current text. For example: in .box-product one the image of product 0001 should get alt text from this paragraph Box 0001

and another blocks the same respectly.

$(document).ready(function() {
  for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
    document.getElementsByClassName("name")[i].setAttribute(
      "alt", document.getElementsByTagName("img")[i].src);
  }
});

.box-product {
  display: inline-block;
  border: 1px gray solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
  <!-- Product 0001 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0002 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0003 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0003</p>
  </div>
</div>

1. Please add jQuery. 2. Please fix typo. There is no such thing as setElementByTagname 3. Use jQuery for all access or don't use jQuery — mplungjan, Feb 20 '17 at 14:13

score 1 · Accepted Answer · answered Feb 20 '17 at 14:17

Perhaps you meant this?

I use jQuery for all the access - you had typos in your DOM access

$(function() {
  $(".box-product").each(function() {
    $(this).find("img").attr("alt",$(this).find("p.name").text());
  });
});

.box-product {
  display: inline-block;
  border: 1px gray solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
  <!-- Product 0001 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0002 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0003 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0003</p>
  </div>
</div>

samanime · Answer 2 · 2017-02-20T15:10:15.633

-1

With jQuery,

$('.box-product').each(function() {
    $(this).children('img').attr('alt', $(this).children('.name').text());
});

Basically, $('.box-product') gets all of the boxes. Then you need to loop through each, getting the text from it's child .name and assigning it to the alt attribute of it's child img.

Without jQuery, you can use the querySelectorAll and querySelector functions to easily the same.

document.querySelectorAll('.box-product').forEach(function() {
    this.querySelector('img').alt = this.querySelector('.name').innerText;
});

And without those functions (for older browsers):

var products = document.getElementsByClassName('box-product');
for(i in products) {
    var product = products[i];
    product.getElementsByTagName('img')[0].setAttribute('alt', product.getElementsByClassName('name')[0].innerText);
}

edited Feb 20 '17 at 15:10

answered Feb 20 '17 at 14:13

samanime

25,408
15
90
139

I think your edit is wrong however. http://stackoverflow.com/questions/22754315/foreach-loop-for-htmlcollection-elements - older browsers do not support foreach and no browsers support foreach on an html collection http://stackoverflow.com/questions/22754315/foreach-loop-for-htmlcollection-elements – mplungjan Feb 20 '17 at 14:19
@mplungjan Indeed. Thanks for pointing that out, tried to convert too fast. I've updated it to something that should work. – samanime Feb 20 '17 at 15:10
I'd be interested to know why this is being downvoted. I gave three perfectly valid solutions to answer the question. – samanime Feb 20 '17 at 15:56
I agree. There is no longer any reason (not that there was any to begin with, but the foreach could have triggered it) – mplungjan Feb 20 '17 at 16:06

Replace alt text attribute of images getting text in paragraph

2 Answers2