CIT 261 - Fluency Evidence - JavaScript Events

                
/* Set up all the listeners */
window.addEventListener("click",mouseCoords, true);
document.getElementsByClassName("box")[0].addEventListener("mouseover",colorBox);
document.getElementsByClassName("box")[0].addEventListener("mouseout",colorBox);
var boxColor = "blue";

function justNumbers(c) {
    // Assigns keyCode if charCode is null
    let thisCode=c.charCode ? c.charCode : c.keyCode;
    if (thisCode<48||thisCode>57) {
        return false; // Not a number key
    }
    return true;
}

function mouseCoords(event) {
    let mX=event.clientX;
    let mY=event.clientY;
    document.getElementById("mouseX").innerHTML=mX;
    document.getElementById("mouseY").innerHTML=mY;
}

function colorBox(event) {
    let firstBox=document.getElementsByClassName("box")[0];
    if (boxColor == "blue") {
        firstBox.classList.add("red");
        boxColor="red";
    }else{
        firstBox.classList.remove("red");
        boxColor="blue";
    }
}
                
            
This field only accepts numbers
Click the mouse button anytime and see its coordinates
Mouse X:
Mouse Y:
Mouseover this square to turn it red