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>

Answer 1

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>