Event handler do not load my JavaScript function

Question

I'm trying to insert text inside an element with id. However it do not appear. Why will it not load?

function changeBio() {
  var objects = {
    name: 'Tobias',
    address: {
      country: 'Sweden',
      county: 'Stockholms Län',
      city: 'Stockholm',
    },
    age: 20,
    weight: 80.0,
  };

  var name = objects.name;
  var country = objects.address.country;

  document.getElementById('biography').innerHTML = 'My name is ' + name + ', I live in ' + country;
}

<p id="biography"></p>

<script>
  window.onload = function() {
    changeBio();
  };
</script>

JSFiddle: https://jsfiddle.net/cq00/050g68ck/2/

Answer 1

It is throwing error as "VM743:74 Uncaught ReferenceError: changeBio is not defined". bcoz "changeBio()" is being called first and then it is loading that function. you don't need to make explicit call

<script>
  window.onload = function() {
    changeBio();
  };
</script>

this may help.

changeBio();
function changeBio() {
  var objects = {
    name: 'Tobias',
    address: {
      country: 'Sweden',
      county: 'Stockholms Län',
      city: 'Stockholm',
    },
    age: 20,
    weight: 80.0,
  };

  var name = objects.name;
  var country = objects.address.country;

  document.getElementById('biography').innerHTML = 'My name is ' + name + ', I live in ' + country;
}

or change when to load javascript functions as "in body" or "in head" using gear icon . see example : https://jsfiddle.net/nk1506/zzsaf40k/