0

JavaScript:-

var a=["a","b","c","d","e","f","g","h","i","j","k","l"];
var b=[];
var c=[];

for(var i=0;i<24;i++)
{
    var temp=String(Math.ceil(Math.random()*24));
    while(true)
    {
        var d=true;
        for(var j=0;j<b.length;j++)
        {
            if(b[j]==temp)
            {
                d=false;
            }
        }
        if(d==false)
        {
            temp=String(Math.ceil(Math.random()*24));
        }
        if(d==true)
        {
            break;
        }
    }
    b[b.length]=temp;
    if(i<12)
    {
        c[c.length]=a[i];
    }
    if(i>=12)
    {
        c[c.length]=a[i-12];
    }
}
console.log(b)
console.log("Break")
console.log(c)
for(var i=0;i<24;i++)
{
    document.getElementById(b[i]).addEventListener("mouseover",function()
        {this.classList.toggle(c[i]);}) 
}

css:-

.box
{
    height:100px;
    width:100px;
    border:2px solid black;
    margin-right:10px;
}
.a
{
    background:red; 
}
.b
{
    background:orange;  
}
.c
{
    background:purple;  
}
.d
{
    background:blue;    
}
.e
{
    background:black;   
}
.f
{
    background:green;   
}
.g
{
    background:yellow;  
}
.h
{
    background:pink;    
}

.i
{
    background:peru;    
}

.j
{
    background:saddlebrown; 
}

.k
{
    background:plum;    
}
.l
{
    background:lightsalmon; 
}

HTML:-

<!DOCTYPE html>
<html>
<head>
    <title>Color Game</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="prac3.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div id="1" class="col-lg-2 box thumbnail"></div>
        <div id="2" class="col-lg-2 box thumbnail"></div>
        <div id="3" class="col-lg-2 box thumbnail"></div>
        <div id="4" class="col-lg-2 box thumbnail"></div>
        <div id="5" class="col-lg-2 box thumbnail"></div>
        <div id="6" class="col-lg-2 box thumbnail"></div>
    </div>
    <div class="row">
        <div id="7" class="col-lg-2 box thumbnail"></div>
        <div id="8" class="col-lg-2 box thumbnail"></div>
        <div id="9" class="col-lg-2 box thumbnail"></div>
        <div id="10" class="col-lg-2 box thumbnail"></div>
        <div id="11" class="col-lg-2 box thumbnail"></div>
        <div id="12" class="col-lg-2 box thumbnail"></div>
    </div>
        <div class="row">
        <div id="13" class="col-lg-2 box thumbnail"></div>
        <div id="14" class="col-lg-2 box thumbnail"></div>
        <div id="15" class="col-lg-2 box thumbnail"></div>
        <div id="16" class="col-lg-2 box thumbnail"></div>
        <div id="17" class="col-lg-2 box thumbnail"></div>
        <div id="18" class="col-lg-2 box thumbnail"></div>
    </div>
        <div class="row">
        <div id="19" class="col-lg-2 box thumbnail"></div>
        <div id="20" class="col-lg-2 box thumbnail"></div>
        <div id="21" class="col-lg-2 box thumbnail"></div>
        <div id="22" class="col-lg-2 box thumbnail"></div>
        <div id="23" class="col-lg-2 box thumbnail"></div>
        <div id="24" class="col-lg-2 box thumbnail"></div>
    </div>
</div>
<script type="text/javascript" src="prac3.js"></script>
</body>
</html>

Question:- Whenever I hover over the element, the color does not change neither is the class added, only a "undefined" is added in the class attribute. I tried to generate randomly colored tiles which show the random color only when the mouse is hovered over. I can't understand what's wrong and any kind of help is appreciated.

<div id="18" class="col-lg-2 box thumbnail"></div>
<div id="16" class="col-lg-2 box thumbnail undefined"></div>
  • Just an aside: `Math.ceil(Math.random() * 24)` has a very small (but still finite) chance of returning `0`. You should really be using `Math.floor(Math.random() * 24) + 1` if you want to uniformly choose an integer between `1` and `24`. – Phylogenesis Jul 14 '17 at 12:26
  • Oh! Yes. Thanks for pointing that out, I'll change it . –  Jul 14 '17 at 12:35
  • It doesnt matter what you mouseover, the index is 24 and technically doesnt exist! – Alex Gill Jul 14 '17 at 12:37
  • 1
    Simply fix like so... this.classList.toggle(c[this.id]); – Alex Gill Jul 14 '17 at 12:48
  • Thanks a ton Alex. it was really stupid of me to not consider the fact that i became 24. –  Jul 14 '17 at 13:13

0 Answers0