<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="row">
<div class="col-md-4"></div>
<div class="input-group mb-3 col-md-4">
<input type="text" class="form-control" placeholder="random pass" aria-label="Recipient's username" aria-describedby="button-addon2" id="input1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" onclick="generate()" type="button" id="button-addon2">Roll for Pass</button>
</div>
</div>
</div>
function generate() {
var tab = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9'];
var text = [];
for (var i = 0; i < 10; i++) {
x = Math.random()*tab.length;
z = Math.floor(x)
text.push(tab[z]);
}
console.log(text);
document.getElementById('input1').value = text.join('');
}
