JSFiddle - React, Tailwind, and code Playground

HTML

<span>Tile Number</span> <input name="tileNum" type="text" onkeyup="getAnswer(this.value);"><br>
    <span id="answer">Please enter a non-negative integer for the tile number.</span>

JavaScript

function getTileCoordinates(tileNum){
    var intRoot=Math.floor(Math.sqrt(tileNum));

    var x=(Math.round(intRoot/2)*Math.pow(-1,intRoot+1))+(Math.pow(-1,intRoot+1)*(((intRoot*(intRoot+1))-tileNum)-Math.abs((intRoot*(intRoot+1))-tileNum))/2);

    var y=(Math.round(intRoot/2)*Math.pow(-1,intRoot))+(Math.pow(-1,intRoot+1)*(((intRoot*(intRoot+1))-tileNum)+Math.abs((intRoot*(intRoot+1))-tileNum))/2);
    
    return [x,y];
}

function getAnswer(userInput){
    var coordinates;
    var answerSpan=document.getElementById("answer");
    var tileNum=parseInt(userInput);
    if (isNaN(tileNum) || tileNum < 0) {
        answer.innerHTML="Please enter a non-negative integer for the tile number.";
    } else {
        coordinates=getTileCoordinates(tileNum);
        answer.innerHTML="Answer: (" + coordinates.join() + ")";
    }
}