CODEWITHSUNDEEP
javascripthtmlcss
ehsun
ehsun

Reputation: 157

how to toggle between hiding and showing multiple pictures with a single button

I have to write a code that includes 12 pictures and a “display” button. when I push display button first picture disappears when I push the display button for the second time, the second picture disappears too and this process goes on until all 12 pictures are disappeared. when I push display button for the 13th time, the first picture appears and when I push display button for the 14th time the second picture appears too and this process goes on until all twelve pictures appear again … this is the code I have written but unfortunately it doesn’t work, please help me with it:

<html>
<head>
</head>
<body>
<style type="text/css">
    .table{
    margin-left:0; 
    text-align:center;
}
</style>
  <table class="table" >
    <tr>
      <td><IMG SRC="blfy.gif" ALT="Butterflies" id="bfly"></td>
      <td><IMG SRC="eye.gif" ALT="Eye" id="eye"></td>
      <td><IMG SRC="wave.gif" ALT="Wave" id="wave"></td>
      <td><IMG SRC="jungle.gif" ALT="Jungle" id="jungle"></td>
    </tr>
    <tr>
      <td><IMG SRC="bridge.gif" ALT="Bridge" id="bridge"></td>
      <td><IMG SRC="duck.gif" ALT="Duck" id="duck"></td>
      <td><IMG SRC="egg.gif" ALT="Eggs" id="egg"></td>
      <td><IMG SRC="aurora.gif" ALT="Aurora" id="aurora"></td>
    </tr>
    <tr>
      <td><IMG SRC="it.gif" ALT="Technology" id="it"></td>
      <td><IMG SRC="hill.gif" ALT="Hills" id="hill"></td>
      <td><IMG SRC="string.gif" ALT="strings" id="string"></td>
      <td><IMG SRC="vegi.gif" ALT="vegetables" id="vegi"></td>
    </tr>
  </table>
<style type="text/css">
    .botton {
        height:30px;
        width:315px;
    }
</style>
<button class="botton"; onclick="dispfunc()">Display</button>
<script>
function dispfunc()
{
var a = document.getElementById("bfly");
var b = document.getElementById("eye");
var c = document.getElementById("wave");
var d = document.getElementById("jungle");
var e = document.getElementById("bridge");
var f = document.getElementById("duck");
var g = document.getElementById("egg");
var h = document.getElementById("aurora");
var i = document.getElementById("it");
var j = document.getElementById("hill");
var k = document.getElementById("string");
var l = document.getElementById("vegi");

    if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" )  
    {a.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {b.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {c.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {d.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {e.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {f.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {g.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {h.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {i.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {j.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {k.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "none" ) 
    {l.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {a.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {b.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {c.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {d.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {e.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {f.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {g.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {h.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {i.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {j.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {k.style.display = "none";}


    else (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "block" ) 
    {l.style.display = "none";}
}
</script>
</body>
</html>

Upvotes: 1

Views: 446

Answers (3)

rammanoj
rammanoj

Reputation: 497

Using jquery to solve it. This can solve show and hide of many images (i.e more than 13 even) jquery: 

$(document).ready(function(){
var count = 0;
var hide = 0;
$( "#toogle" ).click(function() {   
if(hide%2==0) {
    if(count>=12) {
        count = 1;
    } else {
        count++;
    }
$( "#img" + count ).show();
}
else {
 $( "#img" + count ).hide();
}
 hide++;
});
});

css:

.img {
display: none;
}

and the following html can be added to img take

<button id="toogle">toggle</button> //onclicking each image toggles
 <table class="table" >
<tr>
  <td><IMG SRC="blfy.gif" ALT="Butterflies" id="img1" class="img"></td>
  <td><IMG SRC="eye.gif" ALT="Eye" id="img2" class="img"></td>
  <td><IMG SRC="wave.gif" ALT="Wave" id="img3" class="img"></td>
  <td><IMG SRC="jungle.gif" ALT="Jungle" id="img4" class="img"></td>
</tr>
<tr>
  <td><IMG SRC="bridge.gif" ALT="Bridge" id="img5" class="img"></td>
  <td><IMG SRC="duck.gif" ALT="Duck" id="img6" class="img"></td>
  <td><IMG SRC="egg.gif" ALT="Eggs" id="img7" class="img"></td>
  <td><IMG SRC="aurora.gif" ALT="Aurora" id="img8" class="img"></td>
</tr>
<tr>
  <td><IMG SRC="it.gif" ALT="Technology" id="img9" class="img"></td>
  <td><IMG SRC="hill.gif" ALT="Hills" id="img10" class="img"></td>
  <td><IMG SRC="string.gif" ALT="strings" id="img11" class="img"></td>
  <td><IMG SRC="vegi.gif" ALT="vegetables" id="img12" class="img"></td>
</tr>

add following statement in head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I think this can solve it

Upvotes: 1

Sreekanth
Sreekanth

Reputation: 3130

you dont need so many conditional statements, All you need is a bit more sophisticated markup and way to uniquely identify the nth image for the nth click.

I have added a classes 'img img-${index}' and you can use the querySelector to get the nth image and repeat.

document.addEventListener('DOMContentLoaded',
  function() {
    var currentImgIndex = 0;
    var totalImages = 12;
    document.querySelector('.bottom').addEventListener('click', function() {

      var currnetIndex = currentImgIndex % totalImages;
      var currentActive = document.querySelector('.img.active');
      if (currentActive) {
        currentActive.classList.remove('active');
      }
      document.querySelector('.img-' + currnetIndex).classList.add('active');
      currentImgIndex++;
    });
  });
.bottom {
  height: 30px;
  width: 315px;
}

img.active {
  border: 1px solid red;
}

.table {
  margin-left: 0;
  text-align: center;
}
<table class="table">
  <tr>
    <td>
      <img SRC="blfy.gif" ALT="Butterflies" id="bfly" class='img img-0' />
    </td>
    <td>
      <img SRC="eye.gif" ALT="Eye" id="eye" class='img img-1' />
    </td>
    <td>
      <img SRC="wave.gif" ALT="Wave" id="wave" class='img img-2' />
    </td>
    <td>
      <IMG SRC="jungle.gif" ALT="Jungle" id="jungle" class='img img-3' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="bridge.gif" ALT="Bridge" id="bridge" class='img img-4' />
    </td>
    <td>
      <IMG SRC="duck.gif" ALT="Duck" id="duck" class='img img-5' />
    </td>
    <td>
      <IMG SRC="egg.gif" ALT="Eggs" id="egg" class='img img-6' />
    </td>
    <td>
      <IMG SRC="aurora.gif" ALT="Aurora" id="aurora" class='img img-7' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="it.gif" ALT="Technology" id="it" class='img img-8' />
    </td>
    <td>
      <IMG SRC="hill.gif" ALT="Hills" id="hill" class='img img-9' />
    </td>
    <td>
      <IMG SRC="string.gif" ALT="strings" id="string" class='img img-10' />
    </td>
    <td>
      <IMG SRC="vegi.gif" ALT="vegetables" id="vegi" class='img img-11' />
    </td>
  </tr>
</table>

<button class="bottom">Display</button>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370679

Use an array instead.

const elements = ['bfly', 'eye', 'wave', 'jungle', 'bridge', 'duck', 'egg', 'aurora', 'it', 'hill', 'string', 'vegi']
  .map(document.getElementById);
let currentSelectedIndex = 0;
function dispfunc(){
  elements[currentSelectedIndex].style.display = 'none';
  currentSelectedIndex = (currentSelectedIndex + 1) % elements.length;
  elements[currentSelectedIndex].style.display = 'block';
}

Upvotes: 1

Related Questions