Display and hide images with JavaScript

Question

Display and hide images with JavaScript

Navigation

#1 by (3 votes)

0

I need some help with the source code below:

CSS :

img {
    display: block;
}

Javascript :

var total = 5;
    var numero = 1;

    function mostrar() {
        if (numero <= total) {
            var inicio = (numero - 1) * 1 + 1;
            for (var x = inicio; x < inicio + 1; x++) {
                document.getElementById('resultado').appendChild(document.getElementById(x));
            }
            numero++;
        }

    }

    var imagens = 5;

    function apagar() {

        if (imagens != 0)
            for (var i = imagens; i > imagens - 1 ; i--) {
                document.getElementById(i).style.display = "none";
            }
        imagens = i;
    }

HTML :

<center>
    <div id="resultado"> &nbsp; </div>
    <hr width="33%">
    <input type="button" value="mostrar" onclick="mostrar()" /> | <button onclick="apagar();">esconder</button>
</center>

<span id="dados" style="display:none">
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/1.jpg"id='1'>&nbsp;&nbsp;<imgsrc="https://sites.google.com/site/mplayerplugin/thumbnails/2.jpg" id='2'> &nbsp;&nbsp;
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/3.jpg"id='3'>&nbsp;&nbsp;<imgsrc="https://sites.google.com/site/mplayerplugin/thumbnails/4.jpg" id='4'> &nbsp;&nbsp;
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/5.jpg" id='5'> &nbsp;&nbsp;
</span>

It works almost perfectly, the problem is that .. does not back print the HTML images after they are removed.

javascript html css

asked by anonymous 17.02.2017 / 11:47

1 answer

PyQT calling file created by QtDesigner .jar files do not open

score 3 · Accepted Answer

I think you're complicating a lot, there is no need for so many operations (starting from the principle that this is what you want), try:

const imgs = document.getElementsByTagName('img');

function mostrar() {
  for (var i = 0; i<imgs.length; i++) {
    if(imgs[i].style.display == 'none' || imgs[i].style.display == '') {
      imgs[i].style.display = 'inline-block';
      break;
    }
  }
}


function apagar() {
  for (var i = imgs.length - 1; i>=0; i--) {
    if(imgs[i].style.display == 'inline-block') {
      imgs[i].style.display = 'none';
      break;
    }
  }
}

img {
  display: none;
}

<input type="button" value="mostrar" onclick="mostrar()" /> | <button onclick="apagar();">esconder</button>

<span id="dados">
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/1.jpg"id='1'>&nbsp;&nbsp;<imgsrc="https://sites.google.com/site/mplayerplugin/thumbnails/2.jpg" id='2'> &nbsp;&nbsp;
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/3.jpg"id='3'>&nbsp;&nbsp;<imgsrc="https://sites.google.com/site/mplayerplugin/thumbnails/4.jpg" id='4'> &nbsp;&nbsp;
    <img src="https://sites.google.com/site/mplayerplugin/thumbnails/5.jpg" id='5'> &nbsp;&nbsp;
</span>

In order to show all the images until we find one that is with display none, or that does not have any inline display defined, it will have display inline-block .

To hide, we do the same thing, but let's begin by traversing the images from the last one to the first, until we find one that has the inline-block display (which is the display with which they stay when we show them) %.