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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

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:

• "read attribute value javascript" yielded How to get the value of an attribute in Javascript
• "return all matches queryselector javascript" yields How to get the second match with QuerySelector?
• "remove attribute javascript" yields How to remove an attribute from a DOM element using Javascript?

CodePudding user response：

You can add id or class to the img HTML element and then just select img HTML element inside your javascript, and assign data-alt attribute to the correct element. You could also target the correct element without editing your html.

let imgWrapperHtmlElement = document.querySelector('.image-parent');
imgWrapperHtmlElement.setAttribute('data-alt', 'your-attribute-value');
let imgHtmlElement = document.querySelector('.image-parent > img');
imgHtmlElement.setAttribute('alt', 'your-attribute-value');

<div class="image-parent">
  <img src="https://apkdoll.com/wp-content/uploads/2021/08/HOLLA-Live-Random-Video-Chat-MOD-APK.png">
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>