我的 JavaScript 代码在本地无法运行，但在 jsfiddle 上运行良好，为什么？答案

【问题标题】：My JavaScript code is not working locally, but works fine on jsfiddle, why?我的 JavaScript 代码在本地无法运行，但在 jsfiddle 上运行良好，为什么？
【发布时间】：2012-12-04 11:43:14
【问题描述】：

我创建了一些将表单提交到标签之外的 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 文件中添加此代码并运行该页面时，它不起作用。代码有什么问题？请解决此问题，并在此先感谢您。

【问题讨论】：

同时拥有变量和表单名称myForm 可能会导致问题。给变量一个不同的名字。与formSubmit 相同。
你是在调用div元素的点击吗？
向左看，注意onLoad 选项被选中。另外：你为什么不使用<input type="button" value="click me"/>？
@EliasVanOotegem - 你为什么推荐<input type="button"> 而不是<button> 元素？（点击事件应该绑定到按钮而不是其父 div，但这是另一个问题。）
@nnnnnn：没有真正的原因，只是因为它更常见

标签： javascript html javascript-events

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的代码示例不起作用，因为在浏览器有机会加载 DOM 元素之前正在处理 JavaScript。有必要将您的 JavaScipt sn-p 放在结束 body 标记之前（因此在加载 DOM 元素后处理它），或者使用“加载时”或“准备就绪”事件处理程序来检测 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 添加到绑定到窗口“加载”事件的回调函数中 - 这也是一个事件处理程序：

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

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

干杯！

【讨论】：