Javascript не работает

var cities = { 
  bra: ["Сан-Паулу", "Рио-де-Жанейро"], 
  rus: ["Москва", "Санкт-Петербург"], 
  ind: ["Мумбаи", "Дели"], 
  chn: ["Шанхай", "Пекин"], 
  zaf: ["Йоханнесбург", "Кейптаун"] 
}; 
var country = document.getElementById("country"); 
var city = document.querySelector("#city"); 
window.onload = selectCountry; 
country.onchange = selectCountry; 
 
function selectCountry(ev) { 
  city.innerHTML = ""; 
  var c = this.value || "bra", 
    o; 
  for (let i = 0; i < cities[c].length; i++) { 
    o = new Option(cities[c][i], i, false, false); 
    city.add(o); 
  }; 
}

body { 
  background-color: lightblue; 
} 
 
h2 { 
  color: black; 
  text-align: center; 
} 
 
p { 
  font-family: Times New Roman; 
  text-align: center; 
}

<select name="country" id="country"> 
  <option value="bra" selected>Бразилия</option> 
  <option value="rus">Россия</option> 
  <option value="ind">Индия</option> 
  <option value="chn">Китай</option> 
  <option value="zaf">ЮАР</option> 
</select> 
<select name="city" id="city"> 
</select>