<!DOCTYPE html>
<html>
<body>
<style>
#gracz{
width:500px;
height:750px;
border: 1px solid #aaaaaa;
float:left;
}
#pozycja{
width:500px;
height:750px;
border: 1px solid #aaaaaa;
float:right;
}
#przycisk{
width:200px;
height:150px;
}
#wylosowany_gracz, #wylosowana_pozycja{
font-size:50px;
}
</style>
<script>
function losowanie_gracza() {
if(this.links == null)
this.links = new Array(
{text: 'Koorteo', img: 'https://s-media-cache-ak0.pinimg.com/236x/56/72/34/5672344c9dbf9992bb8dea5d90dcab28.jpg'},
{text: 'Koorteo1', img: 'https://s-media-cache-ak0.pinimg.com/236x/56/72/34/5672344c9dbf9992bb8dea5d90dcab28.jpg'},
{text: 'Koorteo2', img: 'https://s-media-cache-ak0.pinimg.com/236x/56/72/34/5672344c9dbf9992bb8dea5d90dcab28.jpg'}
);
if(this.links.length <= 0)
{
document.getElementById('wylosowany_gracz').innerHTML = "No more";
document.getElementById('wylosowany_gracz2').src = 'https://zantemagictours.pl/img/x.png';
return;
}
var i = Math.floor(Math.random()*this.links.length);
link = links[ i ];
links.splice(i,1);
document.getElementById('wylosowany_gracz').innerHTML = link.text;
document.getElementById('wylosowany_gracz2').src = link.img;
}
function losowanie_pozycji() {
var links = new Array(
{text: 'TOP'},
{text: 'MID'},
{text: 'ADC'}
);
link = links[Math.floor(Math.random() * 3)];
document.getElementById('wylosowana_pozycja').innerHTML = link.text;
}
</script>
<div id = "gracz">
<center><p id="wylosowany_gracz"></p></center>
<center><img id="wylosowany_gracz2" src="abc" alt="GRACZ"></p></center>
<center><button onclick="losowanie_gracza()" id="przycisk">LOSUJ GRACZA</button></center>
</div>
<div id = "pozycja">
<center><p id="wylosowana_pozycja"></p></center>
<center><button onclick="losowanie_pozycji()" id="przycisk">LOSUJ POZYCJE</button><center>
</div>
</body>
</html>