Question

0

171

Views

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;
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T11:13:18.449Z

The problems are:

You doesn't give [0] to getElementsByClassName.
Using . in the paremeter of getElementsByClassName.
You doesn't call the function
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>

0

171

element .innerText not displaying

1 answers

0

Find remote jobs

Andres GPT