我正在开发一个天气应用程序，页面加载后出现此错误 “未捕获 TypeError：无法读取 null 的属性‘addEventListener’”在第 36 行

这是 Html 的代码片段：

<div class="weather - app">
          <div class="panel">
            <form >
                <input type="text"
                       class="search"  
                       placeholder="Search Location .."/>
                <button type="submit"
                        class="submit">
                    <i class="fa fa-search"></i>
                </button>
            </form>
            <ul class="cities">
                <li class="city">Paris</li>
                <li class="city">Las Vegas</li>
                <li class="city">Japan</li>
                <li class="city">Sfax</li>
            </ul>
            
        </div>
    </div>
    <script src = "main.js" ></script>`

.............................................................................

以及 main.js 的代码片段：

const app = document.querySelector('.weather-app');
const form = document.querySelector('.form');
const search = document.querySelector('.search');
const btn = document.querySelector('.submit');
const cities = document.querySelectorAll('.city');

//add sumbit event to the form
form.addEventListener('submit', (e) => {
    e.preventDefault();

    //if input field(search bar) empty throw an alert
    if (search.value.length == 0) {
        alert('Please type in a City name !');
    } else {
        //change default city name to the one written in search bar 
        cityInput = search.value;
        search.value = "";
        app.style.opacity = "0";
    }
});