Assign forEach to each image via 'img'

Question

I'm trying to use forEach in JS under the img tag in HTML.

This is the variable bobbingPhotos:

bobbingPhotos.forEach(function(photo) {
  var randomDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
  photo.style.animationDelay = randomDelay 's';
});

This problem could be solved by assigning each image a hardcoded class name "bobbing-photo", but I cannot do this because my images are generated from text input.

function generateImages() {
  var userInput = document.getElementById('userInput').value;
  var imageOutput = document.getElementById('imageOutput');
  imageOutput.innerHTML = '';

  for (var i = 0; i < userInput.length; i ) {
    var character = userInput[i].toUpperCase();
    var element;

    if (character === "n") {
  element = document.createElement('br');
}
else if (character === ' ') {
  element = document.createElement('img');
  element.src = 'FONT/SPACE.png';
}
else {
  var image = document.createElement('img');
  image.src = 'FONT/' character '.png';
  element = image;
  image.classList.add("bobbing-photo");
}

Even using image.classList.add("bobbing-photo"), there is no way to make each image float up and down at different points in time.

Is there any way to solve this problem?

Answer 1

Since you added the image tag dynamically, the animation function should be called again after adding the image tag.

generateImages();
    // todo here get elements by classname
    var bobbingPhotos = ...
    // call animation function again
    bobbingPhotos.forEach(function(photo) {
      var randomDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
      photo.style.animationDelay = randomDelay + 's';
    });