JavaScript 在 Mozilla Firefox 中不起作用答案

【问题标题】：JavaScript doesn't work in Mozilla FirefoxJavaScript 在 Mozilla Firefox 中不起作用
【发布时间】：2011-01-30 19:04:10
【问题描述】：

我写了以下代码：

<form name=f>
<input type=button value="Button1" onclick=b1click()>
<input type=button value="Buttone2" onclick=b2click()>
<script language=javascript>
function b1click()
{
  f.action="Login.jsp";
  f.submit();
}
function b2click()
{
  f.action="Logout.jsp";
  f.submit();
}
</script>
</form>

这在 Internet Explorer 中可以正常工作，但在 Mozilla Firefox 3.6.2 中该操作不起作用。如何解决这个问题呢？请任何人帮助我。

【问题讨论】：

"name" 属性只在标签中使用，尝试使用 "id"
这不是真的。名称可用于
标签 w3schools.com/tags/att_form_name.asp
@Radek S 对我来说一直是 HTML 和 CSS 的易于使用的参考，我发布的链接中是否有任何信息特别错误？

标签： javascript firefox dom-events

【解决方案1】：

我知道这听起来很讽刺，但事实是：现在已经不是 1995 年了。

该代码在十年前会很好用，但从那时起标准和规范发生了重大变化。

让我们从头开始：

<form name=f>

所有 html 属性值应该用引号括起来。为保持一致，请使用双引号：<form name="f"> 更好。

<input type="button" value="Button1" onclick="b1click()">

避免内联脚本事件。如果功能发生变化，或者您想删除某个功能，您必须浏览每个页面并调整该功能。更好的方法是给按钮一个 ID，并通过脚本添加 onclick 事件：

HTML:
<input type="button" value="Button1" id="button1">
JS:
document.getElementById('button1').onclick = b1click;

现在轮到脚本了：

<script language=javascript>

您应该使用具有有效MIME type 的type 属性。此外，尽可能将您的脚本移动到外部脚本文件。如果无法做到这一点，请确保对您的脚本进行 XML 编码，或者将其封装在 CDATA 标签中：

<script type="text/javascript" src="path/to/script.js"></script>

或

<script type="text/javascript">
/* <![CDATA[ */
... some code ...
/* ]]> */
</script>

你的脚本的真正问题终于来了。

您引用的f 属性是document 的成员，不是window。我相信 IE 会同时引用这两者，但依赖任何一种行为都是不安全的。

给表单一个 ID：<form id="f">，并从 b[12]click 函数中获取元素

function b1click()
{
  var f = document.getElementById('f');
  f.action = 'Login.jsp';
  f.submit();
}

【讨论】：

'为了一致性，使用双引号'不。这是 50/50。例如，haml（非常很流行）默认呈现单引号。
HTML5 怎么样？它不使用引号（我很惊讶。验证flask.pocoo.org）。
@blender，不需要引号和不使用引号是两个非常不同的东西。最好用引号将您的值括起来，以防您想做一些愚蠢的事情，例如使用空格（即class=one two three 与class="one two three" 非常不同）。 @Radek S，单引号很好。在使用 PHP 和 JS 时，我更喜欢双引号，因为我在这些语言中使用单引号。

【解决方案2】：

首先，将 name="foo" 更改为 id="foo"。名称主要用于在表单本身。

现在，尝试使用document.formID 引用您的表单，而不仅仅是formID。 formID 是一个变量，未定义，但document.formID 是实际的表单元素：

function b1click()
{
  document.f.action="Login.jsp";
  document.f.submit();
}
function b2click()
{
  document.f.action="Logout.jsp";
  document.f.submit();
}

【讨论】：

提议的更改在没有它们的情况下在 Fx 中不起作用

【解决方案3】：

给表单一个 id 并使用：

var form = document.getElementById('formId');

【讨论】：

【解决方案4】：

您应该引用输入属性或任何与此相关的属性。而且您的script 不属于表格之后，例如在body 中，而是在 HEAD 元素中。

这适用于 IE、Firefox 和 Chrome。

<html>
<head>
<script language="javascript">
function b1click()
{
  f.action="Login.jsp";  // better is document.f., but f. appears to work as well
  f.submit();
}
function b2click()
{
  f.action="Logout.jsp";
  f.submit();
}
</script>
</head>
<body>
<form name="f">
<input type="button" value="Button1" onclick="b1click()">
<input type="button" value="Buttone2" onclick="b2click()">
</form>
</body>
</html>

【讨论】：

【解决方案5】：

有几种方法可以引用您的表单。

如果您将表单定义为<form name="Login" id="LoginFrom"></form>，

方法一

如果您的表单是页面中唯一的一个，您可以使用：

document.forms[0].action = 'Login.jsp';

方法二

如果你的表单不是页面中唯一的一个表单，可以使用表单名来引用表单，比如

document.Login.action = 'Login.asp';

方法3

表单也可以被DOM函数getElementByID引用。

document.getElementByID('LoginForm').action = 'Login.asp'

【讨论】：