 <p>You're setting the image:</p> <pre><code>if (userGuess == 'r'){ var displayRock = "&lt;img src='images/rock-user.png' alt='User Rock'&gt;"; document.querySelector("#userGuess").innerHTML = displayRock; } </code></pre> <p>And it is immediatelly being replaced a few lines below:</p> <pre><code>document.querySelector('#userGuess').innerHTML = displayUserGuess; </code></pre> <p>You might want to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML" rel="nofollow">insertAdjacentHTML('beforeend', displayUserGuess)</a> function.</p> <p>Also, it is not good practice to query for the same element multiple times - it is better to query once and keep it in a variable like:</p> <pre><code>var userGuessEl = document.querySelector('#userGuess'); // and then below userGuessEl.innerHTML = ... </code></pre>