Метод JS не распознается на странице

Я пытаюсь создать простой js-скрипт, который динамически заполняет 2 выпадающих списка, но я не понимаю, что я делаю не так со своим скриптом :(

<head>
    <script>
        var carModels = {
            Audi : ["A3", "A4" ],
            Alfa-Romeo : ["Giullietta", "Giullia" ]
        }

        function makeSubmenu(value) {
            if (value.length == 0){
                document.getElementById("modelId").innerHTML = "<option></option>";
            } else {
                var modelOptions = "";
                for (modelCar in carModels[value]) {
                    modelOptions += "<option>" + carModels[value][modelCar]
                            + "</option>";
                }
                document.getElementById("modelId").innerHTML = modelOptions;
            }
        }

        function resetSelection() {
            document.getElementById("marcaId").selectedIndex = 0;
            document.getElementById("modelId").selectedIndex = 0;
        }
    </script>
</head>
<body onload = "resetSelection()">
<div align = "center">
    <form th:action = "@{/search}" method = "POST">

        <select id = "marcaId" size = "1" name = "marca" required onchange = "makeSubmenu(this.value)">
            <option></option>
            <option>Audi</option>
            <option>Alfa-Romeo</option>
        </select>

        <select id = "modelId" size = "1" name = "model" required >
            <option></option>
        </select>

        <input type = "submit" value = "Search">
    </form>
 </body>

Я получаю эти 2 ошибки:

Uncaught ReferenceError: resetSelection is not defined
    at onload ((index):6)
Uncaught ReferenceError: makeSubmenu is not defined
    at HTMLSelectElement.onchange ((index):13)
onchange @ (index):13

Я не понимаю, почему говорится, что эти методы не определены

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно заключить свойство Alfa-Romeo в кавычки, как это ..

var carModels = {
    Audi : ["A3", "A4" ],
    "Alfa-Romeo" : ["Giullietta", "Giullia" ]
}

Пожалуйста, обратитесь к этот ответ для объяснения причин.

The only reasons to quote object-keys are

  • the property name is reserved/used by the browser/js engine (eg. "class" in IE)
  • you have special characters or white spaces in your key

Другие вопросы по теме