Код JavaScript, работающий в jsfiddle, но не работающий в браузере

Мой код работает в jsfiddle, но не работает в браузере. Я не знаю, что я здесь пропустил, не могли бы вы проверить его и сообщить мне решение. Я Google, но я не получаю правильное решение, пожалуйста, помогите мне, это ссылка jsfiddle http://jsfiddle.net/pLTrJ/9/

   <!doctype html>
     <html>
      <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript">   </script>
      </head>
      <script type="text/javascript">
        var random = 0;
        var theDiv = document.getElementById("showVal");
        updateTheDiv(9,0);
        function updateTheDiv(inRange, inMin) {
        random = (Math.random()*inRange+inMin)|0; 
        theDiv.innerHTML = random;
        var nextCall = (Math.random()*1000)|0;
        setTimeout(function() {
        updateTheDiv(inRange, inMin);
            }, nextCall);
        }
      </script>
        <body>
          <div id="showVal"></div>
        </body>
   </html>
Источник

2 ответа

Решение

jsfiddle автоматически обернул его в onload событие. Вы не сделали этого на своей HTML-странице, поэтому, когда она запускается в браузере, вы пытаетесь заполучить div перед его рендерингом, поэтому theDiv нулевой.

Ниже должно работать:

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">   </script>
</head>
<script type="text/javascript">
    window.onload = function () {
        var random = 0;
        var theDiv = document.getElementById("showVal");
        updateTheDiv(9, 0);
        function updateTheDiv(inRange, inMin) {
            random = (Math.random() * inRange + inMin) | 0;
            theDiv.innerHTML = random;
            var nextCall = (Math.random() * 1000) | 0;
            setTimeout(function () {
                updateTheDiv(inRange, inMin);
            }, nextCall);
        }
    }
</script>
<body>
    <div id="showVal">
    </div>
</body>
</html>
Источник

Попробуйте это в вашем браузере;)

<!doctype html>
 <html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript">   </script>
  </head>

    <body>
      <div id="showVal"></div>
    </body>


<script type="text/javascript">
    var random = 0;
    var theDiv = document.getElementById("showVal");
    updateTheDiv(9,0);
    function updateTheDiv(inRange, inMin) {
    random = (Math.random()*inRange+inMin)|0; 
    theDiv.innerHTML = random;
    var nextCall = (Math.random()*1000)|0;
    setTimeout(function() {
    updateTheDiv(inRange, inMin);
        }, nextCall);
    }
  </script>
</html>

(Я просто поместил скрипт внизу. Таким образом, скрипт загружается после того, как ваш элемент установлен.)

Источник
Другие вопросы по тегам