title: How can i change my image as the listener?
body: <p>I have some trouble with my javascript</p>
  <p>I have two images. When I wanna click randomly an image, it will be replaced with the image in the JS. if I click on the rest image, it also will be replaced like the previous image but the previous image will return to the original image. How can I do that??</p>
  <p>Thanks a lot.</p>
  <p>This is my code. Sorry for my bad English skills</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openPresent(event){
    
      event.target.src ='https://i2.wp.com/gsviec.com/wp-content/uploads/2020/02/coder-dev-1.jpeg?fit=900%2C500&amp;ssl=1';
      
  }
  
    const image = document.querySelectorAll('img');
    let i;
    for(i=0;i&lt;image.length;i++){
      image[i].addEventListener('click',openPresent);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;head&gt;
      &lt;style&gt;
      &lt;/style&gt;
       &lt;script src='script.js'defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;h1&gt;Click for a present:&lt;/h1&gt;
        &lt;img src=https://timviec365.com/pictures/images/coder-la-gi-3.jpg&gt;
        &lt;h1&gt;Hello World&lt;/h1&gt;
        &lt;img src="https://img.timviec.com.vn/2020/10/coder-la-gi-2.jpg"&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>