Браузер утверждает, что функция JS «не определена», но если я запускаю ее из командной строки, она работает

Question

Я только начинаю работать с Javascript, пытаюсь создать игру Jeopardy и пытаюсь вызвать функцию из другой функции. На моем сайте вы нажимаете эту кнопку:

<input type="button" value="Build My Jeopardy! Game" onclick="drawBoard()">

которая запускает эту функцию:

function drawBoard() {

    formtoVariables();

    document.getElementById('body').innerHTML = '<center><h1>Jeopardy!</h1><div id="screen"><table id="board"><thead><td id="cat1" value="cat1"></td><td id="cat2"></td><td id="cat3"></td><td id="cat4"></td><td id="cat5"></td></thead><tr><td id="r1c1"></td><td id="r1c2"></td><td id="r1c3"></td><td id="r1c4"></td><td id="r1c5"></td></tr><tr><td id="r2c1"></td><td id="r2c2"></td><td id="r2c3"></td><td id="r2c4"></td><td id="r2c5"></td></tr><tr><td id="r3c1"></td><td id="r3c2"></td><td id="r3c3"></td><td id="r3c4"></td><td id="r3c5"></td></tr><tr><td id="r4c1"></td><td id="r4c2"></td><td id="r4c3"></td><td id="r4c4"></td><td id="r4c5"></td></tr><tr><td id="r5c1"></td><td id="r5c2"></td><td id="r5c3"></td><td id="r5c4"></td><td id="r5c5"></td></tr></table></div></center>';

    fillBoardWithText();

};

Проблема, с которой я сталкиваюсь, связана с formToVariables () - браузер выдает мне эту ошибку:

ReferenceError: formtoVariables не определено

Однако, если я открою консоль в Chrome и наберу

formToVariables();

функция работает. Я думаю, что эта проблема может быть связана с областью видимости - я могу сам вызывать formToVariables (), но drawBoard () по какой-то причине не имеет к ней доступа. Есть идеи, почему это может быть? Или проблема связана с чем-то другим?

Answer 1

Ваш т строчный вместо прописных:

formtoVariables();

Должно быть:

formToVariables();

Поскольку Javascript чувствителен к регистру, это два разных имени функции. Второе определено, первое - нет.

Answer 2

JavaScript чувствителен к регистру.formToVariables! = formtoVariables.