How to add alt text to images without an ID

Question

I need to add alt text to various images which do not have IDs or anything else to identify the images from one another other there the image file names.

Is there a way to add alt text to each image based on what the image file name is?

Here's an example of the code I started working on, but it obviously doesn't work and I'm not even sure I am heading in the right direct. Any help would be much appreciated.

<script>
document.onload = function(){
  img.setAttribute('src', 'icons-vegan.png');
  img.setAttribute('alt', 'Vegan Icon');
  img.setAttribute('title', 'Vegan Icon'); 
}   
document.onload = function(){
  img.setAttribute('src', 'icons-gluten.png');
  img.setAttribute('alt', 'Gluten Icon');
  img.setAttribute('title', 'Gluten Icon'); 
}   
</script>

Can you show an example of your HTML? – code Jun 05 '23 at 22:35 — code, Jun 05 '23 at 22:35

score 0 · Answer 1 · answered Jun 05 '23 at 22:40

Basic solution making lots of assumptions given the lack of detailed context

var images = document.getElementsByTagName("img");
for(var image of images)
{
 image.setAttribute("alt", image.src)
}

Get all images by simply getting a list of all elements of tag ""
For each image, set its alt = its src

code · Accepted Answer · 2023-06-05T22:49:21.080

We can simply select all the img tags from our HTML and update the alt and title dynamically.

// find all img tags and convert the list to an array
const imgs = Array.from(document.getElementsByTagName("img"))

// loop through each image and process the `src` attribute
imgs.forEach(img => {
  const altText = img.src
    .split("/") // split the string into segments delimited by "/"
    .at(-1) // get last segment
    .split(".").slice(0, -1).join(".") // remove file extension
    // remove dashes and capitalize
    .split("-").map(s => s[0].toUpperCase() + s.slice(1).toLowerCase()).join(" ")

  // add properties
  img.setAttribute("alt", altText)
  img.setAttribute("title", altText)
})

Demo:

// find all img tags
const imgs = document.getElementsByTagName("img")

console.log("before adding alt:", [...imgs])

// loop through each image and process the `src` attribute
Array.from(imgs).forEach(img => {
  const altText = img.src
    .split("/") // split the string into segments delimited by "/"
    .at(-1) // get last segment
    .split(".").slice(0, -1).join(".") // remove file extension
    // remove dashes and capitalize
    .split("-").map(s => s[0].toUpperCase() + s.slice(1).toLowerCase()).join(" ")

  // add properties
  img.setAttribute("alt", altText)
  img.setAttribute("title", altText)
})

console.log("after adding alt:", [...imgs])

<img src="icons-vegan.png" />
<img src="icons-gluten.png" />
<div>
  <img src="/something/something-else.png?12345" />
</div>

You realize src is one of the things that should be set? So can't operate on that like you do. — The Fool, Jun 05 '23 at 22:48
@TheFool but I assume that the images already exists in the HTML page, and given the OP's "based on the file name" I assume the src already exists, but they were misguided in the approach? — code, Jun 05 '23 at 22:50

score 0 · Answer 3 · answered Jun 05 '23 at 22:52

Select all images and loop them to get their src attribute. Once you have them, you can set the alt attribute for each image which is inside that loop. Here is an example:

const images = document.querySelectorAll('img');

for (let img of images) {
  switch (img.getAttribute('src')) {
    case 'banana.png':
      img.alt = 'Banana';
      break;
    case 'apple.png':
      img.alt = 'Apple';
      break;
    case 'orange.png':
      img.alt = 'Orange';
      break;
  }
}

<img src="banana.png">
<img src="apple.png">
<img src="orange.png">

How to add alt text to images without an ID

3 Answers3