我的JavaScript代码无法在本地运行，但可以在jsfiddle上正常工作，为什么？

Question

我创建了一些JavaScript代码，将代码提交到标签中。 这是代码：

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

当我在http://jsfiddle.net/HrCxz/上尝试此代码时，它工作正常。 但是，当我将此代码添加到HTML文件中并运行页面时，它不起作用。 代码有什么问题？ 请解决此问题，在此先感谢。

Answer 1

在小提琴中，您的代码在onload处理程序中运行。 这是默认选项，但是左侧面板允许您更改它。 如果将其更改为在<head>运行，则小提琴也不起作用： http : //jsfiddle.net/HrCxz/1/

您需要添加自己的onload处理程序，或将脚本块移动到它尝试操作的元素之后。 脚本块按照浏览器从上到下解析页面时发现的顺序执行。 任何给定脚本块中的JS都只能操作已解析的元素，即看起来更接近源开头的元素，除非您将代码放入从onload事件（或从准备用于浏览器的文档）中onload的事件处理程序中支持它，或者如果您使用提供它的库或自己编写代码）。

Answer 2

JSFiddle正在使用onload事件。

第1步：

通过将JS移动到<form>标记下方来尝试此操作，

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

第2步：

或者，您可以像这样附加onload事件，

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

Answer 3

您在div元素上调用click函数，是否需要在按钮上执行此操作？ var formSubmit = document.getElementById('BUTTONIDHERE');

Answer 4

您的代码示例不起作用，因为在浏览器有机会加载DOM元素之前正在处理JavaScript。 有必要将JavaScipt代码段放在结束body标签之前（以便在加载DOM元素之后进行处理），或者使用“ on load”或“ on ready”事件处理程序来检测何时加载DOM。然后触发您的Javascript。

这是三个有关在加载DOM元素后如何触发JavaScript的示例：

1）如果您使用的是jQuery，请将您的Javascript粘贴到$（document）.ready（）事件处理程序中：

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

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

2）您可以对文档“就绪”使用jQuery的替代语法：

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

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

2）将您的JavaScript添加到绑定到窗口“ load”事件的回调函数中-这也是一个事件处理程序：

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

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

干杯!

我的JavaScript代码无法在本地运行，但可以在jsfiddle上正常工作，为什么？

问题描述

4 个解决方案

解决方案1
3 已采纳 2012-12-04 11:45:00

解决方案2
0 2012-12-04 11:45:29

解决方案3
0 2012-12-04 11:46:54

解决方案4
0 2012-12-04 12:04:36

我的JavaScript代码无法在本地运行，但可以在jsfiddle上正常工作，为什么？

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-12-04 11:45:00

解决方案2 0 2012-12-04 11:45:29

解决方案3 0 2012-12-04 11:46:54

解决方案4 0 2012-12-04 12:04:36

解决方案1
3 已采纳 2012-12-04 11:45:00

解决方案2
0 2012-12-04 11:45:29

解决方案3
0 2012-12-04 11:46:54

解决方案4
0 2012-12-04 12:04:36