在用javascript和html创建程序时遇到问题

我基本上是在尝试创建这个数字猜游戏。每当用户点击其中一个圆圈时，它就会改变颜色，它还会存储这个数字并检查它是否与数组中的数字匹配如果匹配，用户赢，如果不匹配，用户输。但是我做起来有困难。我能够创建一个板，当你点击圆圈时，它会改变颜色，然后我做了一个新的项目，我用它来猜数字，不使用html，只是javascript，看看我是否能理解制作游戏的概念，它是有效的。然而，将两者结合起来后，结果却大错特错。现在，我不仅得到了错误的结果后，点击圆圈，而且，圆圈的颜色不改变点击它。我该怎么办?我哪里做错了…请解释一下。这是我的密码。顺便说一句，我使用的modify变量是为了将数组减少到3个元素，所以从这5个数组元素中，用户只选择3个。

 var Color="#F1C40F";	
    function theFunctions(element){
    if(Color=='#F1C40F')
    {
    Color='#F00';
    }
    else
    {
    Color='#F1C40F';
    }
    element.style.backgroundColor=Color;
    var number= new Array(1,2,3,4,5);
    var time=new Array();
    var i;
    var modify= new Array();
    for(i=0;i<3;i++){
    modify[i]=number[i];
    }
    for(i=0;i<3;i++){
    time[i]=number;
    if(modify[i]==time[i]){
    document.write(time[i]+" Correct");
    }
    else{
    document.write("Sorry but you lost the correct order is "+modify);
    break;
    }
    }
    };

   div#gameboard{
    background:#D35400;
    border:#999 2px solid;
    width:1200px;
    height:900px;
    margin:35px;
    margin-top:40px;
    padding:30px;
    }
    div#board{
    background:#EB984E;
    height:800px;
    width:800px;
    margin-top:20px;
    margin-left:20px;
    padding:30px;
    }
    div.circleBase {
        border-radius: 50%;
        behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    	width: 130px;
        height: 130px;
        background-color:#F1C40F;
        border: 3px solid black;
    }

<div id="gameboard">
    <div id="board">
    <div class="circleBase" onclick="theFunctions(1);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 1</p>
    </div>
    <div class="circleBase" style="margin-left:160px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 2</p>
    </div>
    <div class="circleBase" style="margin-left:320px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 3</p>
    </div>
    <div class="circleBase" style="margin-left:480px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 4</p>
    </div>
    <div class="circleBase" style="margin-left:640px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 5</p>
    </div>
    <div class="circleBase" style="margin-top:10px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 6</p>
    </div>
    <div class="circleBase" style="margin-left:160px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 7</p>
    </div>
    <div class="circleBase" style="margin-left:320px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 8</p>
    </div>
    <div class="circleBase" style="margin-left:480px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 9</p>
    </div>
    <div class="circleBase" style="margin-left:640px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:30px; font-size:70px; margin-top:25px;"> 10</p>
    </div>
    </div>
    </div>