Обработчик событий не загружает мою функцию JavaScript

#javascript #jsfiddle

Вопрос:

Я пытаюсь вставить текст внутри элемента с идентификатором. Однако она не отображается. Почему она не загружается?

 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 /

1. но не в jsfiddle

2. @AammadUllah: Я видел, что это сработало здесь сейчас, но по какой-то причине не в JSFiddle. Вы заставляете ее работать в JSFiddle?

3. В JSFiddle ваш JS настроен для запуска onload, поэтому changeBio не определяется, когда выполняется скрипт в тегах script. Измените ее, чтобы вместо этого она вводилась в тело или заголовок. jsfiddle.net/050g68ck/4

4. @AntP какие изменения вы внесли? Оба кода выглядят точно так же, я что-то здесь упускаю?

5. @aManHasNoName — Вы можете увидеть разницу, если нажмете на Javascript (с символом зубчатого колеса) и проверьте тип загрузки.

Ответ №1:

Выдает ошибку типа «VM743: 74 Uncaught ReferenceError: changeBio не определен«. bcoz сначала вызывается «changeBio()», а затем загружается эта функция. вам не нужно выполнять явный вызов

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

это может помочь.

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

или измените, когда загружать функции javascript как «в теле» или «в голове», используя значок шестеренки.
смотрите пример :
https://jsfiddle.net/nk1506/zzsaf40k /

Ответ №2:

Просто измените тип загрузки на No wrap в body внутри jsfiddle и поместите приведенный ниже код внутри html

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

И ниже внутри javascript

      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;
     }
          window.onload = function() {
             changeBio(); 
            };

запустите ее, и все будет готово

1. Пожалуйста, прокомментируйте перед голосованием «против», если вы смелы, я выполнил этот код перед публикацией здесь, поэтому, пожалуйста, используйте ваши привилегии «против» или «против», как это должно быть.

Ответ №3:

При использовании Run code snippet здесь все работает так, как задумано. Внутри JSFiddle это не работает, потому что ваша вкладка JavaScript настроена на запуск при загрузке, а ваш onload обработчик, помещенный во вкладку HTML, запускается перед ним, поэтому changeBio на этот раз не определен. Я предлагаю вам поместить ваш onload обработчик также на вкладку JavaScript, чтобы сохранить весь скрипт вместе, а затем настроить его на обертывание в head или body . Изменил JSFidle здесь: https://jsfiddle.net/050g68ck/9 /