So I'm having a problem with my snake game it's coded in js and I'm trying to figure out how to make a menu where you can change the values, the value doesn't get logged in the console and it does not appear in the game.

https://jsfiddle.net/Faxtixe/duq6ba3x/3/

class Apple {
    constructor() {
        let isTouching

        while (true) {
            isTouching = false;
            this.x = Math.floor(Math.random() * canvas.width / snake.size) * snake.size
            this.y = Math.floor(Math.random() * canvas.height / snake.size) * snake.size

            for (let i = 0; i < snake.tail.length; i++) {
                if (this.x == snake.tail[i].x && this.y == snake.tail[i].y) {
                    isTouching = false
                }
            }

            var tb1 = document.getElementById("setInterval").value // fps/Interval var curruntly not working
            var tb2 = document.getElementById("thisColor").value // color var also curruntly not working
            console.log(tb1);
            console.log(tb2);


            this.size = snake.size
            this.color = tb2.value // here is the color of the food

And Console Errors

window.onload = () => {
    gameLoop()
}

function gameLoop() {
    setInterval(show, 1000/tb1.value) // here is our fps value
}

This is the HTML code

<form>
    <label for="setInterval">Speed/FPS:</label>
    <input type="text" id="setInterval" name="setInterval"><br><br>
    <label for="this.color">Food Color:</label>
    <input type="text" id="thisColor" name="thisColor"><br><br>
    <input type="submit" value="Submit">
</form>

Menu