My JavaScript code is not working locally, but works fine on jsfiddle, why?

问题

I created some javascript code that submits the form out the tag. Here is the code:

<script type="text/javascript">
var myForm = document.forms['myForm'];

var formSubmit = document.getElementById('formSubmit');


formSubmit.onclick = function(){
myForm.submit();
}
</script>

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

When i try this code on http://jsfiddle.net/HrCxz/ it works fine. But When I add this code in an HTML file and run the page, It doesn't work. What's wrong with the code? Please fix this, and many thanks in advance.

回答1:

In the fiddle your code is run inside an onload handler. This is the default option, but the left-hand panel allows you to change it. If you change it to run in the <head> then the fiddle doesn't work either: http://jsfiddle.net/HrCxz/1/

You need to either add an onload handler of your own, or move your script block to after the elements it tries to manipulate. Script blocks are executed in the order they're found as the browser parses the page top to bottom. JS in any given script block can only manipulate elements that have already been parsed, i.e., ones that appear closer to the beginning of the source, unless you put your code in an event handler called from the onload event (or from document ready for browsers that support it or if you use a library that provides it or otherwise code it yourself).

回答2:

JSFiddle is using onload event.

Step 1:

Try this by moving your JS below the <form> tag,

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

<script type="text/javascript">
   var myForm = document.forms['myForm'];

   var formSubmit = document.getElementById('formSubmit');


   formSubmit.onclick = function(){
      myForm.submit();
   }
</script>

Step 2:

Or you can attach onload event, like this,

<script type='text/javascript'>//<![CDATA[ 
  window.addEvent('load', function() {
     var myForm = document.forms['myForm'];

     var formSubmit = document.getElementById('formSubmit');

     formSubmit.onclick = function(){
         myForm.submit();
     }
  });//]]>  

</script>

<form name="myForm" action="http://msn.com" method="post">
</form>

<div id="formSubmit"><button>Click me</button></div>

回答3:

You are calling the click function on the div element, did you need to do this on the button? var formSubmit = document.getElementById('BUTTONIDHERE');

回答4:

Your code sample does not work because the JavaScript is being processed before the browser has a chance to load the DOM elements. It is necessary to either place the your JavaScipt snippet just before the closing body tag (so it's processed after your DOM elements are loaded), or to use an 'on load' or 'on ready' event handler to detect when the DOM is loaded and then fire your Javascript.

Here are three examples of how to fire your JavaScript when the DOM elements have loaded:

1)If you're using jQuery, past your Javascript into the $(document).ready() event handler:

$(document).ready(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) You can use jQuery's alternate syntax for document 'ready':

$(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) Add your JavaScript to a callback function bound to the window 'load' event - this is also an event handler:

window.addEvent('load', function() {
  var myForm = document.forms['myForm'];
   var formSubmit = document.getElementById('formSubmit');

   formSubmit.onclick = function(){
     myForm.submit();
   }
})

Cheers!

来源：https://stackoverflow.com/questions/13702123/my-javascript-code-is-not-working-locally-but-works-fine-on-jsfiddle-why

标签

javascript

html

javascript-events