JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<body>
    <div class="div" id="1">1</div>
    <div class="div" id="2">2</div>
    <div class="div" id="3">3</div>
    <div class="div" id="4">4</div>
    <div class="div" id="5">5</div>
    <div class="div" id="6">6</div>
    <div id="numberdiv"></div>
</body>

CSS

.div {
    height: 200px;
}
body:nth-child(odd) {
    background-color: blue;
}
body:nth-child(even) {
    background-color: green;
}
#numberdiv {
    position: fixed;
    top: 50%;
    float: right;
    background-color: aqua;
}

JavaScript

var number;
document.onmouseover = function (obj) {
    console.log(typeof obj.target.id);

    switch (parseInt(obj.target.id, 10)) {

        case 1:
            var number = "a";
            break;
        case 2:
            var number = "b";
            break;
        case 3:
            var number = "c";
            break;
        case 4:
            var number = "d";
            break;
        case 5:
            var number = "e";
            break;
        case 6:
            var number = "f";
            break;
    }
    console.log(number);

    document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}