元素.innerText不显示

Question

我试图替换两个div(“城市”和“预算”)的文本内容，一个是来自数组的随机美国城市，另一个是随机生成的数字。当我在控制台中运行代码时，代码工作正常，但由于某种原因，它不会在浏览器中显示。知道这里出了什么问题吗？就我的目的而言，我不使用JQuery，只是直接使用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;
}

Answer 1

问题是：

你没有给getElementsByClassName.

• Using getElementsByClassName.

• You的

1. 没有调用函数
2. 你没有定义usCities

这应该是可行的：

​

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>

​