title: How to change image when a button is clicked in html
body: <p>I am learning html and I want to know how I can change an image when a button is clicked. This is what I have so far code below:-</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-html lang-html prettyprint-override"><code>&lt;button onclick="document.getElementById('myImage').src='https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'"&gt;change image&lt;/button&gt;
  
  &lt;img id="myImage" src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="800" height="600" longdesc="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to be able to change the image when the button is clicked.
  So if the image is google then when the button is clicked I want ubuntu to appear and if the image is ubuntu then when the button is clicked I want firefox. I have done it using multiple buttons but I don't know how to use one button to change the image.</p>
  
  <p>If someone could help me that would be great.</p>