View and hide images with Javascript

Question

I need 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;
    <img src="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;
    <img src="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 return to print the images after being removed in HTML.

Answer 1

I think you’re complicating a bit, there’s no need for so many operations (starting from the beginning that this is what you want), try it like this:

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;
    <img src="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;
    <img src="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>

To show we go through all the images until finding one that has None display, or that does not have any inline display set, this one has display inline-block.

To hide we do the same, but we start going through the last images to the first, until we find one that has the display inline-block (which is the display they get when we show them), it has a display none.