javascript code working in jsfiddle but not working in the browser

Question

my code is working in jsfiddle but not working in the browser i dont know what i missed here could you please check it and tell me the solution. i google it but i am not getting correct solution please help me this is jsfiddle link 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>

Are there errors in the console? What is your expected output? — Andy, Nov 12 '14 at 10:33
Do not use http://code.jquery.com/jquery-latest.min.js, it will always refer to jquery 1.11.1! Read this: http://stackoverflow.com/questions/441412/is-there-a-link-to-the-latest-jquery-library-on-google-apis — Refilon, Nov 12 '14 at 10:34

score 4 · Accepted Answer · answered Nov 12 '14 at 10:36

4

jsfiddle has wrapped it automatically in the onload event. You haven't done this in your HTML page, so when it runs in the browser you're trying to get hold of the div before it's been rendered, so theDiv is null.

The below should work:

<!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>

answered Nov 12 '14 at 10:36

James Thorpe

31,411
5
72
93

You could also mention `$(document).ready();`, in line with using jquery. – SBI Nov 12 '14 at 10:38
I could, but the only reference to jQuery is the included script - it's not actually been used anywhere, nor tagged in the question – James Thorpe Nov 12 '14 at 10:39
@JamesThorpe thank you so much james i got it , but one thing i did not understand what you mean $(document).ready(); – rizwan Nov 12 '14 at 11:11
1

If you _do_ want to use jQuery, the [`.ready()`](http://api.jquery.com/ready/) event handler can be used instead of directly using `window.onload` and allows for multiple handlers to be bound to the event more easily – James Thorpe Nov 12 '14 at 11:13

score 0 · Answer 2 · answered Nov 12 '14 at 10:37

Try this in your Browser ;)

<!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>

(I just put the script to the bottom. So the script loads after your element is set.)

i tried james answer it is working fine, your solution also working fine thank you so much — rizwan, Nov 12 '14 at 11:25

javascript code working in jsfiddle but not working in the browser

2 Answers2

Linked