bilder-button-nachladen.php

Quell Code

<style>
  .bilder_einstellungen{
  width:200px;
}
  
</style>
<div id="info"></div>
<div id="ausgabe">
  <img class='bilder_einstellungen' src='/bilder/11.png'>
</div>
<button id="mehr">weitere Bilder laden</button>

<script>
  bilder=['/bilder/1.png','/bilder/2.png','/bilder/3.png','/bilder/4.png','/bilder/5.png','/bilder/6.png','/bilder/11.png'];

var g=0;
var mehrladen=2;  
var mehrbutton=document.getElementById('mehr');
var inf=document.getElementById('info');

mehrbutton.innerHTML=mehrladen+' weitere Bilder laden';
mehrbutton.addEventListener('click',function(){
schonda=document.getElementById('ausgabe');

   for(f=0;f<mehrladen;f++){
     tagimg=document.createElement('img');
     tagimg.src=bilder[g];
     g++;
     tagimg.className='bilder_einstellungen';
     schonda.appendChild(tagimg);
   }
   inf.innerHTML=(g+1)+' von '+(bilder.length+1)+' geladen';
})   
</script>