How can I access multiple alt attribute values from several images?

Question

I need to retrieve alt attribute value from multiple images and print them below image. I can only get one of them with the below attempt.

JavaScript:

let imgName = document.getElementById(project)
.getElementsByTagName("img")[0].alt

document.getElementById(project)
.getElementsByClassName("img-name")[0].innerText = imgName;

HTML:

<div class="pagination"></div>

<div class="imgslide noselect">
    <div class="prev" onclick="plusDivs('project1', -1)"></div>
    <div class="next" onclick="plusDivs('project1', 1)"></div>
    <img class="slides" alt="image1"src="img/project-1/Scan-4.jpg">
    <img class="slides" alt="image2"src="img/project-1/Scan-8.jpg">
    <img class="slides" alt="image3"src="img/project-1/Scan-24.jpg">
    <img class="slides" alt="image4"src="img/project-1/Scan-35.jpg">
    <img class="slides" alt="image5"src="img/project-1/Scan-39.jpg">
    <img class="slides" alt="image6"src="img/project-1/Scan-40.jpg">
</div>
<div class="img-name"></div>

Answer 1

A quick and elegant solution would be this:

imgnames.textContent = [...document.querySelectorAll('.slides')].map(i=>i.alt).join(' ');

#imgnames {
  border: 3px dotted #ddd;
}

<div class="imgslide noselect">
  <div class="prev" onclick="plusDivs('project1', -1)"></div>
  <div class="next" onclick="plusDivs('project1', 1)"></div>
  <img class="slides" alt="image1" src="img/project-1/Scan-4.jpg">
  <img class="slides" alt="image2" src="img/project-1/Scan-8.jpg">
  <img class="slides" alt="image3" src="img/project-1/Scan-24.jpg">
  <img class="slides" alt="image4" src="img/project-1/Scan-35.jpg">
  <img class="slides" alt="image5" src="img/project-1/Scan-39.jpg">
  <img class="slides" alt="image6" src="img/project-1/Scan-40.jpg">
</div>
<div class="img-name" id="imgnames"></div>

1. imgnames is the id of the div for outputting the image names. Since it has an id it is automatically available as a global variable.

2. To set the text of that div, assign it to the textContent property of that element.

3. document.querySelectorAll('.slides') gets you a NodeList containing reference of all the image elements.

4. [...document.querySelectorAll('.slides')] creates an array from that NodeList...

5. ... which then allows you to use Array.prototype.map() to create another array from it which contains only the contents of each image's alt attribute.

6. Finally, join that array using Array.prototype.join(' ') so it becomes a String and thus, assignable to imgnames.textContent.

Answer 2

Just create an array of all image elements and map the alt attributes into the array like so:

 

const altArray = Array.from(document.getElementsByTagName("slides")).map(e => e.alt);
console.log(altArray);

 

<div class="imgslide noselect">
            <div class="prev" onclick="plusDivs('project1', -1)"></div>
            <div class="next" onclick="plusDivs('project1', 1)"></div>
            <img class="slides" alt="image1"src="img/project-1/Scan-4.jpg">
            <img class="slides" alt="image2"src="img/project-1/Scan-8.jpg">
            <img class="slides" alt="image3"src="img/project-1/Scan-24.jpg">
            <img class="slides" alt="image4"src="img/project-1/Scan-35.jpg">
            <img class="slides" alt="image5"src="img/project-1/Scan-39.jpg">
            <img class="slides" alt="image6"src="img/project-1/Scan-40.jpg">
        </div>
        <div class="img-name"></div>

Answer 3

You could achieve this by first querying all .slides in your document and then mapping each slide element's alt attribute to aquire all alt tags of your slides.

In the snippet below, Array.from is used to transform the result of document.querySelectorAll(".slides") into an Array type - this allows us to use the Array#map method to map each slide elements alt attribute into a temporary array.

The final step .join() creates a comma separated from the string array that results from the prior .map():

var innerText = 
// Select all slides and construct array from NodeList
Array.from(document.querySelectorAll(".slides")) 
// Map each alt attribute to temporary array
.map(image => image.getAttribute("alt")) 
// Construct a comma separated of each alt text
.join() 

document.querySelector(".img-name").innerText = innerText;

<div class="imgslide noselect">
  <div class="prev" onclick="plusDivs('project1', -1)"></div>
  <div class="next" onclick="plusDivs('project1', 1)"></div>
  <img class="slides" alt="image1" src="img/project-1/Scan-4.jpg">
  <img class="slides" alt="image2" src="img/project-1/Scan-8.jpg">
  <img class="slides" alt="image3" src="img/project-1/Scan-24.jpg">
  <img class="slides" alt="image4" src="img/project-1/Scan-35.jpg">
  <img class="slides" alt="image5" src="img/project-1/Scan-39.jpg">
  <img class="slides" alt="image6" src="img/project-1/Scan-40.jpg">
</div>
<div class="img-name"></div>

Answer 4

As a cool kid would do I'd do this manner @tomas

const imgs = document.querySelectorAll('img')

imgs.map(img => {
   // enter code here
   console.log(img.getAttribute('alt'))
})

Answer 5

Just loop through the children and create an array or frankly do whatever you want.

var elements = document.querySelector('.imgslide').children;

let altArray = [];
for(let i = 0; i < elements.length; i++) {
    if(elements[i].src !== undefined) {
        altArray.push(elements[i].alt);
    }
}

console.log(altArray);

<div class="imgslide noselect">
  <div class="prev" onclick="plusDivs('project1', -1)"></div>
  <div class="next" onclick="plusDivs('project1', 1)"></div>
  <img class="slides" alt="image1"src="img/project-1/Scan-4.jpg">
  <img class="slides" alt="image2"src="img/project-1/Scan-8.jpg">
  <img class="slides" alt="image3"src="img/project-1/Scan-24.jpg">
  <img class="slides" alt="image4"src="img/project-1/Scan-35.jpg">
  <img class="slides" alt="image5"src="img/project-1/Scan-39.jpg">
  <img class="slides" alt="image6"src="img/project-1/Scan-40.jpg">
</div>
<div class="img-name"></div>