Can I write text stored as objects into the "alt" attribute for an image tag with JavaScri-CodePudding

I was given a task at MDN to create an image gallery. These were the requirements:

Declare a const array listing the filenames of each image, such as 'pic1.jpg'
Declare a const object listing the alternative text for each image.
Loop through the array of filenames, and for each one, insert an img-tag inside the ".thumb-bar" div-element that embeds that image in the page along with its alternative text.
Add a click event listener to each img-tag inside the "thumb-bar" div-element so that, when they are clicked, the corresponding image and alternative text are shown in the displayed img-tag.
Add a click event listener to the button-element so that when it is clicked, a darkened effect is applied to the full-size image. When it is clicked again, the darkened effect is removed again.

I would be so grateful if you can help me with this complete task. Although, where I actually need aid is in the 3rd part where I am to include each image along with its alternative text. This part was pretty easy (possibly because the images are stored in arrays - which can easily be looped - unlike objects). But I got stuck at the alt text for each image source.

You will notice that the alt texts for each image, unlike the image sources, are stored as Objects.

In dev tools, I saw that I was able to include the alt-text, but the problem is that just one text is injected into all img-tags. Just when I thought I was close to finishing up the 3rd part did I encounter this problem.

You will also notice that I attempted converting the Object for the alt texts into an Array of alt text.

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Declaring the array of image filenames */
const imagesArrayOfFileNames = ['https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg', 'https://images.pexels.com/photos/3769151/pexels-photo-3769151.jpeg', 'https://images.pexels.com/photos/2724748/pexels-photo-2724748.jpeg', 'https://images.pexels.com/photos/1462630/pexels-photo-1462630.jpeg', 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg']

const imageAltText = new Object()
imageAltText.name1 = 'Child reading a bible'
imageAltText.name2 = 'Woman in hospital bed'
imageAltText.name3 = 'Kitchen view of a house'
imageAltText.name4 = 'A girl\'s photo at school'
imageAltText.name5 = 'Two workers at an industry'

/* Looping through images */
for (let imgFileName of imagesArrayOfFileNames) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', imgFileName);

  // convert object to array
  Object.keys(imageAltText).forEach(function(altKey, altVal) {
    newImage.setAttribute('alt', imageAltText[altKey]);
  })
  thumbBar.appendChild(newImage);
}


/* Wiring up the Darken/Lighten button */

h1 {
  font-family: helvetica, arial, sans-serif;
  text-align: center;
}

body {
  width: 640px;
  margin: 0 auto;
}

.full-img {
  position: relative;
  display: block;
  /*min-width: 640px;*/
  width: 640px;
  height: 480px;
}

.full-img img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 480px;
  background-color: rgba(0, 0, 0, 0);
}

button {
  border: 0;
  background: rgba(150, 150, 150, 0.6);
  text-shadow: 1px 1px 1px white;
  border: 1px solid #999;
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 2px;
}

.thumb-bar img {
  display: block;
  width: 20%;
  float: left;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Image gallery</title>
</head>

<body>
  <h1>Image gallery example</h1>

  <div >
    <img  src="https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg" alt="Closeup of a human eye" />
    <div ></div>
    <button >Darken</button>
  </div>

  <div ></div>
</body>

</html>

Please help.

CodePudding user response：

You can either convert object to array, but you can quite easily calculate the key to use fetching value from the object.

/* Declaring the array of image filenames */
const imagesArrayOfFileNames = ['https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg', 'https://images.pexels.com/photos/3769151/pexels-photo-3769151.jpeg', 'https://images.pexels.com/photos/2724748/pexels-photo-2724748.jpeg', 'https://images.pexels.com/photos/1462630/pexels-photo-1462630.jpeg', 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg']

const imageAltText = new Object()
imageAltText.name1 = 'Child reading a bible'
imageAltText.name2 = 'Woman in hospital bed'
imageAltText.name3 = 'Kitchen view of a house'
imageAltText.name4 = 'A girl\'s photo at school'
imageAltText.name5 = 'Two workers at an industry'

/* Looping through images */

imagesArrayOfFileNames.forEach(function (imgFileName, index) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', imgFileName);
  newImage.setAttribute('alt', imageAltText['name'   (index 1)]);
  console.log(newImage)
  // thumbBar.appendChild(newImage);
});

// Alternatively, convert to array:
console.log(Object.values(imageAltText))

CodePudding user response：

Here is the short and simple solution.

Instead of using for loop just use foreach loop.

$.each(imagesArrayOfFileNames, function (altKey, imgFileName) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', imgFileName);
  newImage.setAttribute('alt', Object.values(imageAltText)[altKey]);
  // console.log('img', newImage);
  thumbBar.appendChild(newImage);
});