JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="test"><div id="left"></div><div id="right"></div></div>

CSS

div#test
{
    width: 150px;
    height: 150px;
    background-color: #FF0000;
    position: relative;   
    top: 0px;
    left: 0px;
}

div#test div
{
    width: 50%;
    height: 100%;
    float: left;   
}

div#left
{
    background-color: #00FF00;   
}

div#right
{
    background-color: #0000FF;   
}

JavaScript

document.documentElement.focus();
document.onkeydown = keyDown;
document.getElementById("test").onclick = clicked;

function keyDown(evt)
{
    var key;
    var el  =  document.getElementById("test");
    var left;
    if(!evt)
    {
        evt = window.event;
        if(!evt.which)
        {
            key  =  evt.keyCode;   
        }
    }else if(evt)
    {
        key = evt.which;   
    }
    if(el.style.left)
    {
        left = parseInt(el.style.left, 10);  
    }else if(!el.style.left)
    {
        left = 0;    
    }    
    switch(key)
    {
        case 37:
        left -= 10;
        el.style['left'] = left + "px";
        break;     
        case  39:
         left += 10;
        el.style['left'] = left + "px";
        break;     
    }
}

function clicked(evt)
{
    var el;
    if(!evt)
    {
        evt = window.event;
        el = evt.srcElement;    
    }else  if(evt)
    {
        el = evt.target;   
    }
    switch(el.id)
    {
        case "left":
        fireKey(el);
        break;   
        case "right":
        fireKey(el);
        break;     
    }
}

function fireKey(el)
{
    var key;
    switch(el.id)
    {
        case "left":
        key = 37;
        break;
        case "right":
        key = 39;
        break;    
    }
    if(document.createEventObject)
    {
        var eventObj = document.createEventObject();
        eventObj.keyCode = key;
        el.fireEvent("onkeydown", eventObj);   
    }else if(document.createEvent)
    {
        var eventObj = document.createEvent("Events");
        eventObj.initEvent("keydown", true, true);
        eventObj.which = key;
        el.dispatchEvent(eventObj);
    } 
}