Untitled

<!doctype html>
<title>The Pack</title>
<img src="" width="300" height="267">
<p id="output"></p>
<input id="input" type="text" placeholder="Enter your action...">
<button>enter</button>
<script>
    //Map

    var map = [];
    map[0] = "River.Good place to carch salmon.";
    map[1] = "Village.Beware people don't like to see wolfs near them,";
    map[2] = "Elks.Our main food source.";
    map[3] = "Bear den . Our greatest enemy watch your self.";
    map[4] =  "Den.Home sweet Home";
    map[5] = "Path leading to home ";
    map[6] = "Oak tree";
    map[7] = "Hunting cottge.Beware hunters are near";
        map[8] = "Deer carcus";

    var image = [];
    image[1] = "river.png";
    image[2] = "town.png";
    image[3] = "elk.png";
    image[4] = "bear.png";
    image[5] = "den.png";
    image[6] = "path.png";
    image[7] = "oak.png";
    image[8] = "carcus.png";

    //Player's start location

    var mapLocation = 4;

    //Game Message diplayer

    var gameMessage = "";
    var playerInput = "";

    //actions player can do
    var actionsKnown = ["south","north","east","west"];
    var action = "";

    //output and input element
    var output = document.querySelector("#output");
    var input = document.querySelector("#input");

    //image

    var image = document.querySelector("img");

    //button
    var button = document.querySelector("button");
    button.style.cursor = "pointer";
    button.addEventListener("click",clickHandler,false);
    //rendering game

    render();

    function clickHandler()
    {
        play();
    }

    function play()
    {
        playerInput = input.value;
        playerInput.toLowerCase();

        //reseting previous gameplayes

        action = "";
        gameMessage = "";

        for (i=0; i<actionsKnown.length;i++)
        {
            if(playerInput.indexOf(actionsKnown[i])!==-1)
            {
                action = actionsKnown[i];
                console.log("player action is"+action);
                break;
            }
        }
    switch(action)
    {
        case "north":
            mapLocation -= 3;
            break;

        case "south":
            mapLocation += 3;
            break;

        case "east":
            mapLocation +=1;
            break;

        case "west":
            mapLocation -= 1;
            break;

        default:
            gameMessage = "what the heck is that";
    }
    render();
}

    function render()
    {
        output.innerHTML = map[mapLocation];
        image.src = "D:/Game Development/Games/The Pack/images/"+image[mapLocation];
        //Display the game message
        output.innerHTML += "<br><em>" + gameMessage + "</em>";

    }


</script>