Тот же код, разные результаты в Fiddle vs. VS

Я немного озадачен отличными результатами, полученными от this Fiddle и Visual Studio 2012. Как видно на скрипке, на выходе отображается «Ninja» и «Forever !». Однако, не следует ли мне также видеть «власть!» как часть выхода?Тот же код, разные результаты в Fiddle vs. VS

Вот фрагмент кода VS в целом: «власть»

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test Suite</title> 
    <script type="text/script"> 
     function assert(value, desc) { 
      var li = document.createElement("li"); 
      li.className = value ? "pass" : "fail"; 
      li.appendChild(document.createTextNode(desc)); 
      document.getElementById("results").appendChild(li); 
     } 
     window.onload = function() { assert(true, 'power!'); }; 

     var ninja = { 
      shout: function() { 
       assert(true, 'Ninja'); 
      } 
     }; 
     ninja.shout(); 

     setTimeout(
      function() { assert(true, 'Forever!'); }, 
      500); 
    </script> 
    <style> 
     #results li.pass { 
      color: green; 
     } 
     #results li.fail { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <ul id="results"></ul> 
</body> 
</html>

Когда я запускаю приведенный выше код я вижу ТОЛЬКО быть распечатаны, но потом я бегу в следующее сообщение об ошибке:

Unable to get property 'appendChild' of undefined or null reference

И ошибка указывает на последней строке функции assert. Теперь я знаю, что означает ошибка. Я просто не понимаю, почему возникает ошибка.

Насколько я могу судить, я имею дело с двумя семантически идентичными наборами кода. Или я? Я пытаюсь выяснить, 1) почему я не вижу «власти!». вывода в моей скрипке и 2) почему мой код VS производит другой результат, и 3) почему два результата отличаются по одному и тому же коду.

источник

2014-12-04 BinaryCat

Это потому, что на jsFiddle у вас есть опция 'onLoad' для кода javascript, а это означает, что ваш код уже выполняется после загрузки документа. Если вы попытаетесь изменить это значение на 'onDoamready', вы также должны получить значение ** power! **. Хотя для версии VS я предполагаю, что он пытается выполнить ваш код, прежде чем правильно загрузить весь документ, что приведет к ошибке. Попробуйте поместить весь код внутри вашей функции window.onload. – Dim13i

Bu по умолчанию JSFiddle оборачивает JavaScript в обработчике onload событий ...

JSFiddle screenshot

... ваш код также устанавливает onload обработчик:

window.onload = function() { assert(true, 'power!'); };

... но документ загружает только один раз. К тому времени, когда вы назначили этот обработчик, событие уже прошло.

И тогда проблема обратная, когда вы бежите без JSFiddle.

ninja.shout(); не находится внутри обработчика события нагрузки и появляется перед <ul id="results"></ul>, поэтому он пытается выполнить document.getElementById("results").appendChild(li);, прежде чем элемент результатов существует в DOM.

источник

2014-12-04 23:37:03 Quentin

Я только что получил свой мозг до этого момента. – rfornal

@Quentin - Идеальный смысл! – BinaryCat

Тот же код, разные результаты в Fiddle vs. VS

ответ

Смежные вопросы