CODEWITHSUNDEEP
javascripthtml
Millhorn
Millhorn

Reputation: 3166

How to add alt text to an image using a data attribute on the parent?

I'm trying to figure out how to add an alt-text attribute to an image by assigning a data attribute to the parent container of that image.

Basically, whatever text I add to data-alt, will be assigned as alt-text on the img element.

How can I write the attribute so that it's applied as alt-text to the image, and not the parent?

What I want to enter in my code editor:

<div class="image-parent" data-alt="hello world">
    <img src="path/to/image">
</div>

My desired result:

<div class="image-parent">
  <img src="path/to/image" alt="hello world">
</div>

Here's what I've tried, but I'm not understanding how to apply the data attribute to the child element of image.

let imgParentContainers = document.querySelector('.image-parent');
let dataAlt = imgParentContainers.setAttribute('data-alt', '');
<div class="image-parent" data-alt="alt text here">
  <img src="https://apkdoll.com/wp-content/uploads/2021/08/HOLLA-Live-Random-Video-Chat-MOD-APK.png">
</div>

Upvotes: 1

Views: 1155

Answers (1)

esqew
esqew

Reputation: 44712

You need a few improvements to get to your desired target state:

  1. It's not clear why you'd use setAttribute() to get data from an attribute. As its name implies, it is used solely for setting the value of an attribute. A better attempt would be to use getAttribute(), but in this case, since you're accessing a data-* element, you should probably use HTMLElement.dataset instead.
  2. Unless you anticipate having exactly one element with the class image-parent, you should definitely swap your use of querySelector for querySelectorAll to ensure you get a NodeList of any/all matches instead of just the first one found in the DOM. In this case, you'll also have to use a loop for both (a) all parent containers matching your .image-parent selector, and another for (b) each of the img elements within that container.
  3. Be a bit more specific with your CSS selector in your call to querySelector/querySelectorAll to avoid issues relating to trying to access attributes that don't exist by matching on elements that have the data-alt attribute in the first place.
  4. Your desired end result shows that the data-alt attribute no longer exists on the parent container element; if this is actually desired goal, you don't seem to have attempted to do so in your snippet. Use removeAttribute() for this.

let imgParentContainers = [...document.querySelectorAll('.image-parent[data-alt]')];
imgParentContainers.forEach(parentContainer => {
    [...parentContainer.querySelectorAll('img')].forEach(imgElement => {
        imgElement.setAttribute('alt', parentContainer.dataset.alt);
    });
    parentContainer.removeAttribute('data-alt');
});
<div class="image-parent" data-alt="alt text here">
  <img src="https://apkdoll.com/wp-content/uploads/2021/08/HOLLA-Live-Random-Video-Chat-MOD-APK.png">
</div>

In the future, you may find it useful to use your preferred search engine to research each individual component of your requirement (appended with your language of choice; JavaScript in this case) to get a better idea of the methods you should be looking to use to achieve your goals. For example, the following Google searches yielded several pre-existing threads on this site alone for each component of the solution:

Upvotes: 2

Related Questions