I have 5 html buttons and 32 images , and 32 combinations to display images

How to use 5 different buttons for different set of combinations to display particular combinations, I have tried with onclick function in html where I pass the parameter to backend and tried to store it in the global empty string , but didn’t work,

• consider the divs as buttons which has images,
• here is the object which I declared as comb

<div id="main">
    <img src="images/bg.jpg" alt="wrapper0" width="100%" height="100%" />
    <div class="btnimgs" id="btn1" data-id="1" onclick="combinationSelector('b1')"><img src="images/BTN_ETA.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn2" data-id="2" onclick="combinationSelector('b2')"><img src="images/BTN_MVD.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn3" data-id="3" onclick="combinationSelector('b3')"><img src="images/BTN_CKD.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn4" data-id="4" onclick="combinationSelector('b4')"><img src="images/BTN_Diabete.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn5" data-id="5" onclick="combinationSelector('b5')"><img src="images/BTN_IM.png" width="100%" height="100%" /></div>
    <div class="graphs" id="graph_1"><img id="graphImages" src="" width="100%" height="100%" /></div>    

let comb = {b1: "PNG/Graphs-33.png",
    "b1,b2": "PNG/Graphs-34.png",
    b2: "PNG/Graphs-35.png",
    "b1,b2,b3": "PNG/Graphs-36.png",
    "b1,b3": "PNG/Graphs-37.png", ...}

let combinations = "";
function combinationSelector(e) {
    console.log(combinations.concat(e));
}

let btns = document.getElementsByClassName("btnimgs");
let imageGraph = document.getElementById("graphImages");

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
    this.classList.toggle("active");
    if (this.classList.contains("active")) {
        imageGraph.style.display = "block";
        imageGraph.src = comb[combinations];
        } else {
        imageGraph.style.display = "none";
        }
    });
}

Answer

I think this snippet shows what you’re trying to do. On each button click, we loop through the buttons to build the combination from all active buttons.

Other changes include:

• Using a single event listener (with event delegation) instead of in-line event handlers
• Avoiding repetition in the comb values
• Using a class to hide the img element (via CSS) when it has no valid src property

---

Note that:

• The snippet will never show an actual image because the specified files don’t exist on the Stack Overflow server.
• Activating button 4 or 5 will always print “no image” because we’re using a truncated version of the comb object.

const
  // Identifies some DOM elements
  mainContainer = document.getElementById("main-container"),
  graphImg = document.getElementById("graph-img"),
  // (Spread operator converts HTML Collection to a proper array)
  btns = [...document.getElementsByClassName("btn")],
  // Matches button combinations with image numbers
  comb = { "1":"33", "12":"34", "2":"35", "123":"36", "13":"37" };

// Calls updateCombos when user clicks inside mainContainer
mainContainer.addEventListener("click", updateCombos);

// Defines the listener
function updateCombos(event){ // Listener can access triggering event
  const clicked = event.target; // Event has useful properties
  if(!clicked.classList.contains("btn")){ // Ignores irrelevant clicks
    return;
  }
  clicked.classList.toggle("active");
  const
    // Makes string from data-id values of all active btns
    selected = btns
      .filter(btn => btn.classList.contains("active"))
      .map(btn => btn.dataset.id)
      .join(""),
    imgNum = comb[selected],
    src = `PNG/Graphs-${imgNum}.png`;

  // Prints info about user's selections
  console.log(`Btns: ${selected}  >>>  Show image: ${imgNum ? src : "(no image for this combination)"}`);

  // Assigns image source (or hides img element)
  if(src){ graphImg.src = src; }
  else { graphImg.classList.add("hidden"); } // Lets CSS do the work
}

.btn{
  width: 2.5em; margin-bottom: 0.5em; padding: 0.5em;
  border: 1px solid grey; border-radius: 1em;
}
.active{ background-color: lightgreen; } /* visual cue */
.hidden{ display: none; }

<div id="main-container">
  <div class="btn" data-id="1">Btn 1</div>
  <div class="btn" data-id="2">Btn 2</div>
  <div class="btn" data-id="3">Btn 3</div>
  <div class="btn" data-id="4">Btn 4</div>
  <div class="btn" data-id="5">Btn 5</div>

  <div><img id="graph-img" src="" /></div>
</div>