How to Hide and Show Images by clicking on HTML Button

Question

I'm trying to change the images as per alphabetic character when I click on any alphabetic button.

HTML

<div id="btn">
  <input type="button" onclick="hideImage();" value="A" class="btn-group" />
</div>

<div id="images">
  <img src="Letter-A.png" class="image-group"></img>
</div>

JavaScript

 function hideImage() {
   var button = document.getElementsByClassName("btn-group");
   document.getElementsByClassName('image-group').onclick = function() {
       if (button.style.display == "none") {
         button.style.display = "block";
       } else {
         button.style.display = "none";
       }

I get an error "display" property can not set as undefined.

You must iterate though a NodeList of buttons before their use. — zer00ne, May 28 '18 at 00:16

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

getElementsByClassName() gathers all elements with a given className which is called a HTMLCollection or NodeList. In order to reference each item in a NodeList/HTMLCollection we must loop thru each one using a for loop, or by converting the NodeList into an array and then using an array method on it.

The following Demo does the latter (an array method) using;

Array.from() to convert each NodeList into an array
forEach() array method to iterate through the arrays and assign an onclick event handler on each button.btn associate each event handler/button.btn to the corresponding img.img according to current index position of the arrays.
The actual show/hide behavior of each image is provided by classList.toggle('off')

Demo

Details commented in Demo

/* Collect all .btn classes into a NodeList and comvert it into 
|| an array
*/
var btnGroup = Array.from(document.getElementsByClassName("btn"));

/* Collect all .img classes into a NodeList and convert it into 
|| an array
*/
var imgGroup = Array.from(document.getElementsByClassName('img'));

/* Iterate (loop) thru the imgGroup array with forEach() array
|| method.
*/// In each loop get a .btn from the btnGroup array's index 
//// position that corresponds with the current index of the loop.
//// Register an onclick event handler that toggles the .off class
//// to a .img of the imgGroup array positioned at current loop 
//// index.


imgGroup.forEach(function(img, idx) {

  btnGroup[idx].onclick = function() {

    img.classList.toggle('off');
  }

});

.off {
  display: none;
}

<div id="btn-group">
  <input type="button" value="A" class="btn" />
  <input type="button" value="B" class="btn" />
  <input type="button" value="C" class="btn" />
  <input type="button" value="D" class="btn" />
  <input type="button" value="E" class="btn" />
</div>

<div id="img-group">
  <img src="https://www.luckyclovertrading.com/images/LBL14CG_A_a.jpg" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/theme_alphabets/26/12/B-400.png" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/fridge_magnets/orange/13/C-400.png" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/varsity_letters/37/16/D-400.png" class="img" width='100'>

  <img src="https://images-na.ssl-images-amazon.com/images/I/31ETtJ6FG6L.jpg" class="img" width='100'>
</div>

Valentin Sánchez · Answer 2 · 2018-05-28T01:01:16.417

0

I assume you have a list of buttons and images where the only difference is the alphabet letter. In that case, you can do something like this.

let btns = document.getElementsByClassName('btn-action')
for(let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    hideImage(btns[i].value);
  })
}

function hideImage(letter){
  let id = "image-" + letter;
  let img = document.getElementById(id)
  if(img.style.display === "none") {
    img.style.display = "block";
  }
  else {
    img.style.display = "none";
  }
}

<div id="btn">
  <input type="button" value="A" class="btn-group btn-action"/>
 </div>

 <div id="images">
    <img src="Letter-A.png" id="image-A" class="image-group">
 </div>

Please avoid using inline HTML event attributes

edited May 28 '18 at 01:01

answered May 28 '18 at 00:54

Valentin Sánchez

131
11

Thank you for confirmation but still it does not work. I have created 26 alphabetic button on a page left hand side, then in other div I stored images as as per all character of Alphabet now when I click on any alphabet or button it should Hide other images and show clicked one alphabet image only. – Amit Kumar May 28 '18 at 01:17
What do you mean with "does not work"? Any errors in the console? – Valentin Sánchez May 28 '18 at 01:19

How to Hide and Show Images by clicking on HTML Button

2 Answers2

Demo