pass.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph</title>
<link rel ="stylesheet" href="pass.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<label>
<input type="checkbox" id="chk1" value="1">
アルファベット小文字
</label><br>
<label>
<input type="checkbox" id="chk2" value="2">
アルファベット大文字
</label><br>
<label>
<input type="checkbox" id="chk3" value="3">
数字
</label><br>
<label>
<input type="checkbox" id="chk4" value="4">
記号
</label><br>
生成文字数<input type="number" id="num"><br>
<button id="btn">生成</button>
<p id="pass"></p>
<script src="pass.js"></script>
</body>
</html>
pass.js
$(function(){
console.log('foo');
var moji1 = "abcde";//testで短め
var moji2 = "ABCDE";
var moji3 = "12345";
var moji4 = "!#$&?";
$('#btn').on('click',function(){
var num = $('#num').val();
var passStr ="";//初期化すると同時に、これが文字列であると示す
var moji="";//連結できるように空文字を入れておく
//var moji = moji1+moji2+moji3+moji4;
if( $('#chk1').prop('checked')) moji+=moji1;
if( $('#chk2').prop('checked')) moji+=moji2;
if( $('#chk3').prop('checked')) moji+=moji3;
if( $('#chk4').prop('checked')) moji+=moji4;
console.log(moji);
for (i=0; i<num; i++){//8回回す
var ran=Math.floor(Math.random()*moji.length);
passStr += moji.charAt(ran);//何文字目か
}
$('#pass').text(passStr);
if (num==""){
console.log('はいってない');
$('#pass').text('生成文字数を入力どうぞ！！');
}
});
});
