element .innerText not displaying

I’m trying to replace the text content of two divs ("city" and "budget"), one with a random US city from an array and one with a randomly generated number. The code works fine when I run it in the console, but for some reason it won’t display in the browser. Any idea what’s going wrong here? For my purposes I’m not using JQuery, just straight JavaScript.

HTML:

<div id="result">
    <div class="city">
        <h1>City</h1>
    </div>
    <div class="budget">
        <h1>Budget</h1>
    </div>
</div>

JS

function city() {
    document.getElementsByClassName('.city').innerText = usCities[Math.floor(Math.random() * usCities.length)];
}

function budget() {
    document.getElementsByClassName('.budget').innerText = Math.floor(Math.random() * 1000000) + 100000;
}

>Solution :

The problems are:

1. You doesn’t give [0] to getElementsByClassName.
2. Using . in the paremeter of getElementsByClassName.
3. You doesn’t call the function
4. You doesn’t define the usCities

This should works:

let usCities = ["Chicago", "New York"]

function city() {
  document.getElementsByClassName('city')[0].innerText = usCities[Math.floor(Math.random() * usCities.length)];
}

function budget() {
  document.getElementsByClassName('budget')[0].innerText = Math.floor(Math.random() * 1000000) + 100000;
}
city();
budget();

<div id="result">
  <div class="city">
    <h1>City</h1>
  </div>
  <div class="budget">
    <h1>Budget</h1>
  </div>
</div>