changing an image to another one when clicking on a button with JavaScript

Solution for changing an image to another one when clicking on a button with JavaScript
is Given Below:

I have an image displayed in my website. and I want to write a JavaScript code to change that image when clicking on a given button and I want to get another image displayed when clicking on another button so on and so forth. Let me show you how I have tried to solve this problem:


<div class ="container image">
              <img src="alpaca/backgrounds/blue50.png"  id="picture" class ="show1" />


const image = document.getElementById("picture");

     function showImg() {
      image.src = "blue50.png";
      //hide previously shown image
      for ( i = 1; i < 18; i++) {
          var obj = document.getElementById( "picture" + i );
          if (obj != null)
      var obj = document.getElementById( "picture" + id );      
      if (obj != null)


.container {
    position: absolute;
    left: -140px;
  .image { 
  .eye { 
    z-index: 10;

  .mouth { 
    z-index: 8;
  .nose { 
    z-index: 8;

  .leftButton {
    color: black;
    font-family: 'sofia';
    border-radius: 30px;
    background-color:rgb(252, 228, 228);
    bottom: -410px;

You see, what I need is for instance , when clicking on the button “blue60” of “Backgrounds” I should get another background image and this as to be the same for others buttons. Right now, when clicking on the button “blue60” I get nothing. Please , help me solve this problem.

<div id="Backgrounds" ><p class="para">Backgrounds</p>
        <button type="button" onclick="showImg(1)" src="Alpaca/backgrounds/blue50" class="rightSubButton">Blue50</button>
        <button type="button" onclick="showImg(2)" src="Alpaca/backgrounds/blue60" class ="rightSubButton">Blue60</button>
        <button type="button" onclick="showImg(3)" src="Alpaca/backgrounds/blue70" class ="rightSubButton">Blue70</button>
        <button type="button" onclick="showImg(4)" class ="rightSubButton">Darkblue30</button>
        <button type="button" onclick="showImg(5)" class ="rightSubButton">Darkblue50</button>
        <button type="button" onclick="showImg(6)" class ="rightSubButton">Darkblue70</button>
        <button type="button" onclick="showImg(7)" class="rightSubButton">Green50</button>
        <button type="button" onclick="showImg(8)" class ="rightSubButton">Green60</button>
        <button type="button" onclick="showImg(9)" class ="rightSubButton">Green70</button>
        <button type="button" onclick="showImg(10)" class ="rightSubButton">Grey40</button>
        <button type="button" onclick="showImg(11)" class ="rightSubButton">Grey70</button>
        <button type="button" onclick="showImg(12)" class ="rightSubButton">Grey80</button>
        <button type="button" onclick="showImg(13)"class ="rightSubButton">Red50</button>
        <button type="button" onclick="showImg(14)"class ="rightSubButton">Red60</button>
        <button type="button" onclick="showImg(15)"class ="rightSubButton">Red70</button>
        <button type="button" onclick="showImg(16)"class ="rightSubButton">Yellow50</button>
        <button type="button" onclick="showImg(17)"class ="rightSubButton">Yellow60</button>
        <button type="button" onclick="showImg(18)"class ="rightSubButton">Yellow70</button>
        <div id="Ears" ><p class="para">Ears</p>
          <button type="button" class="rightSubButton">Default</button>
          <button type="button" class ="rightSubButton">Tilt-backward</button>
          <button type="button" class ="rightSubButton">Tilt-forward</button>

You can change the src property of the desired HTMLImageElement in order to change its image:

const image = document.getElementById("");

function showImg(number) {
  image.src=""; // Path or URL to image