JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<button>Go</button>
<div id="log"></div>

JavaScript

var input = document.querySelector("input");
var button = document.querySelector("button");
var inventory = ["jacket", "pants", "map"];
var actionsIKnow = ["north", "east", "west", "south"];
var messages = ["A group of dangerous minions. Turn back, you do not have a sword",
    "You have gone too deep into the forest. Want to go further?",
    "A giant ruby crystal",
    "A silent lake; you see your reflection in the water",
    "Clear patch of land",
    "A sleeping dragon. Bettwe not wake it up",
    "A solitary cottage. Faint music can be heard from the inside",
    "Looks like this path leads to the cottage of the flute maker",
    "A lot of tombstones, looks like an old graveyard"];
var userInput;
var startingPos = 4;

button.addEventListener("click", takeMeThere, false);

function takeMeThere() {
    userInput = input.value;
    userInput = userInput.toLowerCase();
    if (userInput != null) {
        validateInput();
    }
}

function validateInput() {
    for (var i = 0; i < actionsIKnow.length; i++) {
        if (userInput.indexOf(actionsIKnow[i]) != -1 ) {
            move(actionsIKnow[i]);
        }
    }
}

function move(where) {
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(where));
    document.querySelector('#log').appendChild(p);
}