Tengo una serie de imágenes:

 const characterImages = ["images/jerry-senfeld.png", "images/george-costanza.png", "images/elaine-benes.png", "images/cosmo-kramer.png"]

Tengo otra función que extrae algunos datos de una API básica y actualiza una página HTML simple. Una declaración if mira el HTML interno para determinar qué carácter está allí y, en función de eso, establece el atributo src de una imagen. Todo funciona como se esperaba, sin embargo, la imagen que se muestra siempre está 1 punto de índice detrás de la cotización. Entonces, por ejemplo, si el HTML interno de <h2> dice "George", puedo esperar que se muestre la imagen jerry-seinfeld.png. He estado dando vueltas en círculos sobre esto, cualquier ayuda sería apreciada. Código a continuación. ¡Gracias!

 //Define our variables const headerTag = document.querySelector("h2"); const quoteTag = document.querySelector(".quote"); let characterImage = document.querySelector(".characterImage"); const characterImages = [ "images/jerry-senfeld.png", "images/george-costanza.png", "images/elaine-benes.png", "images/cosmo-kramer.png", ]; var x; const getQuote = () => { fetch("https://seinfeld-quotes.herokuapp.com/quotes") .then((response) => response.json()) .then((jsonData) => { quoteTag.innerHTML = jsonData.quotes[x].quote; headerTag.innerHTML = jsonData.quotes[x].author; }); }; // images function to go below: const getImage = () => { if (headerTag.innerHTML == "Jerry") { characterImage.setAttribute("src", characterImages[0]); } else if (headerTag.innerHTML == "George") { characterImage.setAttribute("src", characterImages[1]); } else if (headerTag.innerHTML == "Elaine") { characterImage.setAttribute("src", characterImages[2]); } else if (headerTag.innerHTML == "Kramer") { characterImage.setAttribute("src", characterImages[3]); } else { characterImage.setAttribute("src", "images/placeholder-image.png"); } }; document.querySelector("button").addEventListener("click", function (event) { x = Math.floor(Math.random() * 422); getQuote(); getImage(); });

HTML (partes relevantes):

 <div class="main-quote"> <h2></h2> <img src="images/placeholder-image.png" class="characterImage" alt="character image"> <p class="quote"></p> <button class="button2">Click!</button> </div>