Attribuer forEach à chaque image via 'img'

Question

J'essaie d'utiliser forEach en JS sous la balise img en HTML.

Il s'agit de la variable bobbingPhotos :

bobbingPhotos.forEach(function(photo) {
  var randomDelay = Math.random() * 2; // Délai aléatoire entre 0 et 2 secondes
  photo.style.animationDelay = randomDelay + 's';
});
Ce problème pourrait être résolu en attribuant à chaque image un nom de classe codé en dur "bobbing-photo", mais je ne peux pas le faire car mes images sont générées à partir de la saisie de texte. 
function generateImages() {
  var userInput = document.getElementById('userInput').value;
  var imageOutput = document.getElementById('imageOutput');
  imageOutput.innerHTML = '';

  pour (var i = 0; i < userInput.length; i++) {
    caractère var = userInput[i].toUpperCase();
    élément var ;

    si (caractère === "n") {
  element = document.createElement('br');
}
sinon si (caractère === ' ') {
  element = document.createElement('img');
  element.src = 'FONT/ESPACE.png';
}
autre {
  var image = document.createElement('img');
  image.src = 'FONT/' + caractère + '.png';
  élément = image ;
  image.classList.add("bobbing-photo");
}
Même en utilisant image.classList.add("bobbing-photo"), il n'y a aucun moyen de faire flotter chaque image de haut en bas à différents moments dans le temps. 
 Existe-t-il un moyen de résoudre ce problème ? 

            

Answer 1

Puisque vous avez ajouté la balise d'image de manière dynamique, la fonction d'animation doit être à nouveau appelée après l'ajout de la balise d'image.

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';
    });