プログラミング初心者です。
プログラムが正常に作動しません。
自分でどこが問題なのか調べ、直そうと努力したのですが、上手くいきませんでした。
JavaScriptのifStopのあたりがうまくいっていないようです。CSSも反映できていないようです。
どこをどう直せばいいのか教えてください。お願いします。

$=function(x){
return document.getElementById(x);
}

var numList=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

var inStop=true;

function startBingo(){
$("start").style.display="none";
$("stop").style.display="inline";
isStop=false;
startRoulette();
}

function stopBingo(){
$("start").style.display="inline";
$("stop").style.display="none";
isStop=true;
stopRoulette();
}

function startRoulette() {
roulette = setInterval(function() {
var id=" ";
var rnd=Math.floor(Math.random()*numList.length);
document.getElementById("view").innerHTML=numList[rnd];
});
}

function stopRoulette() {
if(roulette) {
clearInterval(roulette);
}

if(isStop){
if($("out").innerHTML){
$("out").innerHTML=$("out").innerHTML+numList[rnd];
}
else{
if($("out").innerHTML){
$("out").innerHTML=$("out").innerHTML+" "+numList[rnd];
}
}

numList.splice(rnd,1);

if(numList.length==0){
alert("FINISH!");
$("start").disabled=true;
}
return false;
}
}
@charset "UTF-8";

#view{
 font-size:20em;
 font-family:"sans-serif"
 background-color:#ffffff;
 color:#000000;
}

#start{
 width:200px;
}

#stop{
 width:200px;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bingo-program.css"
 type="text/css" />
<script type="text/javascript" src="check.js"></script>
<title>BINGO-Program-for-schoolfestival</title>
</head>
<body>
<header style="text-align:center;">
<strong>BINGO!</strong>
</header>
<br>
<section style="text-align:center;">
<input type="button" id="start" name="start" value="START" onclick="startBingo()">
<input type="button" id="stop" name="stop" value="STOP" onclick="stopBingo()" style="display:none;">
<br>
<div id="view" style="text-align:center;"></div>
<hr/>
<div id="out"></div>
<hr/>
</section>
</body>
</html>