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 >
        <h1>City</h1>
    </div>
    <div >
        <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;
}

CodePudding user response：

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 >
    <h1>City</h1>
  </div>
  <div >
    <h1>Budget</h1>
  </div>
</div>