Number Pad Javascript Control (draft)

<h1>WiFi Car App Javascript</h1>

<?php
$ip = $_SERVER['SERVER_ADDR'];

echo "<div style='width:640; height:480; margin-left:auto; margin-right:auto;'>";
echo "<iframe src='http://".$ip.":8000' height=480 width=640></iframe>";
echo "</div>";
echo "<br>";

?>
<div style='width:200px; margin-left:auto; margin-right:auto;'>
    <p>Command (Use NumPad)</p>
<form id="form" onsubmit="return false">
<input type="text" placeholder="Press command keys here" id="kinput">
</form>
<p>Speed: <span id="speed"></span></p>
<p>Direction: <span id="direction"></span></p>
</div>
  
<script src="script.js"></script>

<div style="width:800;">
<iframe style="width:700px; height:100px;" src="system-status.php"></iframe>
</div>
Code language: HTML, XML (xml)

window.onload = function() {
    document.getElementById("kinput").focus();
  };

kinput.onkeydown = handle;

speed = " ";
direction = " ";

function handle(e) {

    if(e.code == "Numpad8"){
        direction = "forward";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad7"){
        direction = "forwardLeft";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad9"){
        direction = "forwardRight";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad4"){
        direction = "left";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad5"){
        direction = "stop";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad6"){
        direction = "right";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Numpad2"){
        direction = "backward";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./controls.php?command=" + direction);
        xmlhttp.send();
    }

    if(e.code == "Digit1"){
        speed = "slow";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./speed.php?speed=" + speed);
        xmlhttp.send();
    }

    if(e.code == "Digit2"){
        speed = "medium";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./speed.php?speed=" + speed);
        xmlhttp.send();
    }

    if(e.code == "Digit3"){
        speed = "fast";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "./speed.php?speed=" + speed);
        xmlhttp.send();
    }


        
        document.getElementById("speed").innerHTML = speed;
        document.getElementById("direction").innerHTML = direction;

        



        kinput.value = " ";  
        kinput.value = e.code;

    }


Code language: JavaScript (javascript)