约1和2

我的HTML页面中有一个表单，我使用这种方式：

<form name="myForm" onsubmit="myFunction();">

内联JS是一种不好的做法，我必须删除它。所以，我删除了onsubmit="myFunction();"并添加了我的JS（在外部文件中）：

var form = document.myForm;

form.onsubmit = function myFunction() { /* codes hidden here */ };

但是...

1。为什么我的代码无效？我以前必须使用window.onload吗？有时我不知道何时应该使用它。

2。一旦我读到我不应该声明全局变量（如上面的form）。那么如何在这种情况下制作局部变量呢？

约3

3. 在函数中，我生成一个URL，用户点击一个按钮将其打开。但我读到open()是不良做法。这是真的？如果是，如何更换？

Answer 1

当声明：

var form = document.myForm;

被评估，表单必须存在于DOM中，否则form将是未定义的。如果以上是在头部，那么当代码执行并且分配时，表格几乎肯定不存在。

在加载DOM之后，应分配任何依赖于DOM元素的值。确保这一点的最简单方法是在关闭 body 标记之前放置脚本。

还有其他方法可以在DOMReady事件（或类似事件）上加载脚本或等待窗口的加载事件，但这会导致元素可见和脚本运行之间出现延迟。 / p>

form.onsubmit = function myFunction() { /* codes hidden here */ };

如果 form 未定义，则您遇到麻烦......： - （

提供不太可能与标准全局变量冲突的全局变量名称也是一个好主意（它们中有很多，例如，许多浏览器将所有元素名称和ID都引入全局变量，引用该元素与之兼容古老的IE代码），所以最好做一些像：

var formElement = document.forms['myForm'];

或者更好的是，保持全局变量计数尽可能低（零可能但不总是合理的）。例如你可以这样做：

window.onload = function() {
  var form = document.myForm;
  form.onsubmit = function myFunction() { /* codes hidden here */ };
}

在头部的代码中。或者类似Kyle Weller的回答接近关闭身体标签。

Answer 2

window.onload确保在您的页面上加载并准备好所有内容。限制变量范围的一种方法是使用这样的自执行匿名函数：

(function(){
  var form = document.myForm;
  form.onsubmit = function myFunction() { /* codes hidden here */ };
})();

对于3号，您希望用户导航到某个网址？您可以使用具有以下属性的标记：

<a href="http://www.myurl.com" target="_blank">Click on my url</a>

target=_blank如果用户的浏览器设置如此，则会在新的标签页或窗口中打开网址。

Answer 3

您可以使用事件侦听器，如下所示：

var form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
console.log('form has been submitted!');
});

当然要注意变量，这些变量在尚未加载时已经分配了DOM元素（如RobG所说）。

您应该声明一个主要对象，如app，然后添加您需要的所有属性或功能：

var app = {};
app.formElement = document.getElementById("form");
app.submitButton = document.getElementById("submitBtn");
app.someFunction = function(number){ return number};

请记住，您还可以将对象添加到该对象中，以便进一步分类。

.open()方法被认为是不好的做法，因为它只是打开一个弹出窗口。

JavaScript良好实践：删除内联onsubmit（），全局变量

约1和2

约3

3 个答案: