<script type="text/javascript"> var packetStorageNum = 0; function increase_stored(){ packetStorageNum++; if(packetStorageNum>6){ packetStorageNum = 6 } } function decrease_stored(){ packetStorageNum--; if(packetStorageNum<0){ packetStorageNum = 0 } } function run() { for(let i = 1;i<packetStorageNum+1;i++){ document.getElementById('i').style.display='block'; } } </script> <body> <div class="container"> <p>number of packets in storage:</p> <div class="buttons"> <input type="button" onClick="increase_stored()" value="Increase"/> <input type="button" onClick="decrease_stored()" value="Decrease"/> </div> <input type="button" onClick="run()" value="Run"/> </div> <div> <div><img src="images/box.jfif" alt="" id="1" style="display:none ;"></div> <div><img src="images/box.jfif" alt="" id="2" style="display:none ;"></div> <div><img src="images/box.jfif" alt="" id="3" style="display:none ;"></div> <div><img src="images/box.jfif" alt="" id="4" style="display:none ;"></div> <div><img src="images/box.jfif" alt="" id="5" style="display:none ;"></div> <div><img src="images/box.jfif" alt="" id="6" style="display:none ;"></div> </div> </body>El código es para 'activar' ciertas imágenes cuando se hace clic en el botón de aumento y para ocultarlas cuando no lo está. Le di a las cajas las identificaciones de los números y estaba tratando de usar un bucle For para pasar por los números, de modo que cuando el valor de las cajas sea 5, las cajas 1-5 estarán visibles.
Debe usar i como variable; actualmente está buscando un elemento con la identificación #i en lugar de #1 , #2 , etc.
document.getElementById(i.toString()).style.display = "block";