For loop with javascript add alt to images

Question

I am new to javascript. I am trying to loop throw all images and check if there is an alt property and add empty alt="" to images that don't have one.

var images =document.querySelectorAll(".view.view-mt-latest-news.view-id-mt_latest_news.view-display-id-block_4 > div > div > div > div > a > img  "); 
for (var i = 0, image; image = images[i]; i++) {
  image.alt = "";
}

    <div class="view view-mt-latest-news view-id-mt_latest_news view-display-id-block_4 view-dom-id-16ee052fc9069895592eb40c1695ac6f jquery-once-2-processed">

    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75" alt="This is alt"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
    </div>
</div>

This code adds alt to all images like this:

<img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75" alt>

It should be like this:

<img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75" alt="">

Can anyone help with this for loop.

Does this answer your question? [Html attribute containing empty string doesn't show = operator](https://stackoverflow.com/questions/28117474/html-attribute-containing-empty-string-doesnt-show-operator) — turivishal, Jul 28 '20 at 13:43

Ratan Thapa · Answer 1 · 2020-07-28T13:46:41.907

var images =document.querySelectorAll(".view.view-mt-latest-news.view-id-mt_latest_news.view-display-id-block_4 > div > div > div > div > a > img  "); 
for (var i = 0, image; image = images[i]; i++) {
  image.alt = " ";
}

  <div class="view view-mt-latest-news view-id-mt_latest_news view-display-id-block_4 view-dom-id-16ee052fc9069895592eb40c1695ac6f jquery-once-2-processed">

    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75" alt="This is alt"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
    </div>
</div>

add a space in between "" your code image.alt = ""; shoud be image.alt = " ";

var images =document.querySelectorAll(".view.view-mt-latest-news.view-id-mt_latest_news.view-display-id-block_4 > div > div > div > div > a > img  "); 
for (var i = 0, image; image = images[i]; i++) {
 image.alt = " ";
}

thank you, now my alt is overridden with empty alt. How can add if statement in order to check if there is alt — MijoN, Jul 28 '20 at 13:46
hope this helps.. https://stackoverflow.com/questions/10735820/find-if-a-img-have-alt-in-jquery-if-not-then-add-from-array — Ratan Thapa, Jul 28 '20 at 13:52

Pablo RP · Accepted Answer · 2020-07-28T13:56:31.143

By default the alt of the image is "" (even if it doesn't appear on the HTML code), but if you want to appear in the HTML code you should do something like this:

    var images =document.querySelectorAll(".view.view-mt-latest-news.view-id-mt_latest_news.view-display-id-block_4 > div > div > div > div > a > img  "); 
    for (var i = 0, image; image = images[i]; i++) {
      if (image.alt == ""){
          image.alt = '\u00A0';
      }
    }

'\u00A0' is the unicode for a non breaking space

score 0 · Answer 3 · answered Jul 28 '20 at 13:47

The thing is that browsers will replace html atributes nothing if there value is empty. So place somting as value like a space. Else it's not posible.

<img src="https://via.placeholder.com/150" alt=" ">

<img src="https://via.placeholder.com/150" alt="">

<img src="https://via.placeholder.com/150" alt>

TechnoTech · Answer 4 · 2020-07-28T14:09:46.017

The alt attribute provides the text equivalent (alternative) for an image. In other words, it should convey the same information as the image does (in that context).

If you exclude a complete alt tag, visually impaired users will be unable to know that you have a picture in that placement.

var images =document.querySelectorAll(".view.view-mt-latest-news.view-id-mt_latest_news.view-display-id-block_4 > div > div > div > div > a > img  "); 
for (var i = 0, image; image = images[i]; i++) {
if(image.alt){
//do your task
  console.log("alt present with value", image.alt);
}else {
 image.alt = " "; //added one space, there should be something 
//for alt other it will not have any value
}
 
}

<div class="view view-mt-latest-news view-id-mt_latest_news view-display-id-block_4 view-dom-id-16ee052fc9069895592eb40c1695ac6f jquery-once-2-processed">

    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75" alt="This is alt"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89" height="75"></a></div>
            </div>
        </div>
    </div>
</div>

thank you, now my alt is overridden with empty alt. How can add if statement in order to check if there is alt — MijoN, Jul 28 '20 at 14:03
@MijoN I have added this too in above snippet. Just check with if condition and do your stuff — TechnoTech, Jul 28 '20 at 14:10

score 0 · Answer 5 · answered Jul 28 '20 at 13:58

Alt attribute is using mainly for conveying the message to end user. Also, it will display when image is not loaded. Here you need to check first whether alt tag is there or not. If not there, then you need to add.

    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89"
                            height="75"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89"
                            height="75" alt="This is alt"></a></div>
            </div>
        </div>
        <div class="views-row views-row-1 views-row-odd views-row-first clearfix">
            <div class="views-field views-field-field-image">
                <div class="field-content overlayed">
                    <a href="#"><img typeof="foaf:Image" src="https://via.placeholder.com/150" width="89"
                            height="75"></a></div>
            </div>
        </div>
    </div>
</div>



    var images = document.querySelectorAll(".view-content img "); // Avoid deep level selector

    for (var i = 0, image; image = images[i]; i++) {
        if (!image.getAttribute("alt")) { // Here you need to check whether attribute already present or not.
            image.alt = '';
        }
    }

PS: Also, do not use deep level selector and it will affect the performance.

For loop with javascript add alt to images

5 Answers5