HTML/Javascript DOM image/figure

Question

Trying to use DOM stuff to create a figure element, with a caption.

Managed to get it working with just image, but I'm not sure how to implement it into a figure. Here is my current code for image.

<div id="image">
          <h3>Landscape</h3>
          <script src="js/image.js"></script>
          <script>
            images.forEach(images=>{
            let imageElem = document.createElement('img');
            imageElem.alt = images.alt;
            imageElem.src = images.url;
            let imagese = document.getElementById('image');
            imagese.appendChild(imageElem);
           })
         </script>
        </div>

Here is the images array: (Links don't work but don't worry about it)

const images = [
  {
    caption: 'Mountain of slate',
    alt: 'Mount',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg'
  },
  {
    caption: 'Peter's river',
    alt: 'Riv',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Riv.jpg'
  },
  {
    caption: 'Desert of Lybia',
    alt: 'Des',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Des.jpg'
  },
  {
    caption: 'Amazon Forest',
    alt: 'For',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/For.jpg'
  },
  {
    caption: 'Malaysia',
    alt: 'Jung',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Jung.jpg'
  }
];

Any help would be greaatly appreciated!

Mamun · Accepted Answer · 2020-02-29 01:14:36Z

You should create the <figure> element first, then create the <img> and <figcaption> with the specific attribute value.

Try the following way:

const images = [
  {
    caption: 'Mountain of slate',
    alt: 'Mount',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg'
  },
  {
    caption: 'Peter\'s river',
    alt: 'Riv',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Riv.jpg'
  },
  {
    caption: 'Desert of Lybia',
    alt: 'Des',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Des.jpg'
  },
  {
    caption: 'Amazon Forest',
    alt: 'For',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/For.jpg'
  },
  {
    caption: 'Malaysia',
    alt: 'Jung',
    url:
   'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Jung.jpg'
  }
];

images.forEach(images=>{
    let figElem = document.createElement('figure');
    let imageElem = document.createElement('img');
    imageElem.alt = images.alt;
    imageElem.src = images.url;
    let figCaptionElem = document.createElement('figcaption');
    figCaptionElem.textContent = images.caption;
    figElem.appendChild(imageElem);
    figElem.appendChild(figCaptionElem);
    let imagese = document.getElementById('image');
    imagese.appendChild(figElem);
   })

<div id="image">
  <h3>Landscape</h3>
  <script src="js/image.js"></script>  
</div>

Brandon Gano · Accepted Answer · 2020-02-29 01:08:05Z

1

To create a figure:

let figure = document.createElement('figure');

To add an image (as created in your original code) to the figure:

figure.appendChild(imageElem)

Then you could append the figures to your image list instead of appending the images directly. You could also append a 'figcaption' element to each figure if you want.

answered Feb 29, 2020 at 1:08

Brandon Gano

6,8101 gold badge30 silver badges28 bronze badges

Comments

Richard Lovell · Accepted Answer · 2020-02-29 01:17:16Z

0

You had a little error that was affecting it - you didn't escape a single quote.

caption: 'Peter\'s river'

Here is a Codepen that demonstrates what you want: https://codepen.io/richjava/pen/oNXWrzM. The generated HTML for each figure element now looks something like this:

<figure>
  <img alt="Mount" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mount.jpg"> 
</figure>

edited Feb 29, 2020 at 1:17

answered Feb 29, 2020 at 1:12

Richard Lovell

88810 silver badges18 bronze badges

Collectives™ on Stack Overflow

HTML/Javascript DOM image/figure

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related