Javascript Code works in jsfiddle and but not in the Browser [closed]

by

The usual reason for this is that you’re putting your code above the elements that it operates on, and not delaying the code using onload or “ready” events. jsFiddle’s default is to put your JavaScript in an onload handler, which delays it until very late in the page load process.

Fundamentally, before your code can do something with an element on the page, the element has to exist. For it to exist, the browser must have processed the HTML for it. So this fails:

<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>

but this works:

<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>

Do I need an onpage load event?

Almost certainly not.

Does the javascript need to be put in a function?

Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.

More Related Contents:

  1. JavaScript Loading Screen while page loads
  2. Get one element title and add this to another div in jquery
  3. Get the longest text in HTML document using Jquery or javascript
  4. Hide/Show image on one click [closed]
  5. jQuery Mobile: document ready vs. page events
  6. jQuery Mobile: Markup Enhancement of dynamically added content
  7. How to move an element into another element?
  8. How to prevent a click on a ‘#’ link from jumping to top of page?
  9. How to calculate the XPath position of an element using Javascript?
  10. How to disable scroll without hiding it?
  11. jQuery: Get selected element tag name
  12. How to read xml file contents in jQuery and display in html elements?
  13. Attach an event in a child iframe to a handler in the parent window
  14. jQuery click anywhere in the page except on 1 div
  15. HTML anchor link – href and onclick both?
  16. document.getElementsByClassName().innerHTML always returns “undefined”
  17. jquery select option click handler
  18. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  19. Center flex item in container, when surrounded by other flex items
  20. Change the style of :before and :after pseudo-elements? [duplicate]
  21. jQuery: How to listen for DOM changes?
  22. Trigger a button click inside an iframe [duplicate]
  23. submit event does not fire if submit initiated programmatically
  24. Remove scrollbar but not scrolling functionality [duplicate]
  25. How can I remove wrapper (parent element) without removing the child?
  26. How to Bootstrap navbar static to fixed on scroll?
  27. How to use pagination on HTML tables?
  28. How to highlight a part part of an Input text field in HTML using Javascript or JQuery
  29. Geolocation closest location(lat, long) from my position
  30. How can I reorder elements with JavaScript?

Leave a Comment