JSFiddle - React, Tailwind, and code Playground

HTML

<button id="bt" onclick = "start_get() " > roll</button>
<p id="random_num"> test </p>
<div >
<img class = "ball" src ="sb1.jpg">
<img class = "ball" src ="sb2.jpg">
<img class = "ball" src ="sb3.jpg">
<img class = "ball" src ="sb4.jpg">
<img class = "ball" src ="sb5.jpg">
</div>

JavaScript

var ball_total = 5 ;
var max_count = 3 ;
var get_count = 1;
var getball = new Array();

function start_get()
{
	gen_rand(ball_total);	
	get_count+=1;
}

function end_game()
{
 if(get_count < max_count) {alert(get_count + ' < ' + max_count); } 
 else 
 {
 	document.getElementById("random_num").innerHTML = "end game";
 	document.getElementById("bt").style.visibility='hidden';
 	return ;
 }
}

function gen_rand(num)
{
	var my_random;
  do
  {
  	 my_random = Math.ceil(Math.random() * num ) ;
  }while(getball.indexOf(my_random) != -1);

  getball.push(my_random);
  document.getElementById("random_num").innerHTML = my_random ;
  change_pic(my_random);
  end_game();
}

function change_pic(get_num)
{
 var my_pic = document.getElementsByClassName("ball");
  my_pic[get_num-1].src = "b"+get_num+".jpg";
}