Question

我有一个将数据发布到同一页面的表单。根据用户的单选按钮选择，我将 checked =“checked”插入单选按钮表单元素，以重新显示正确的选择。这样可以正常工作，但是当重新显示表单时（如果输入错误等），我需要显示一个div（包含表单中的相关字段）。

我有一个onclick事件，它首先显示div（在用户发布表单之前），这很好用，但是当我重新显示表单时，我不希望用户必须手动显示点击再次形成。

因此，我一直在尝试以下几行（为了这篇文章的目的而大幅减少）......

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
 <script language="JavaScript"> 
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
 </script>
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>

...但它返回 Object Required javascript错误（就像在“真实”页面中一样）：

消息：需要对象
行：3
Char：1
代码：0
URI：http://localhost/repair_system/javascript_test.php

这是为什么？我没有正确引用表单元素吗？抱歉，如果我是一个“div”（故意的双坏意图！），我还没有学习javascript的乐趣和游戏！

Answer 1

您的代码正在加载文档时执行，而DOM树尚未就绪。所以它试图访问一个尚不存在的元素。

您可能希望编写一个事件处理程序，只要选中该复选框，就会切换div。

我更喜欢jQuery，它提取了诸如跨浏览器事件处理之类的东西，提供了许多好帮手，并且通常使代码看起来更干净（正确编写时）。这样的事情应该有效：

$(document).ready(function() {
    $('#repair_complete').toggle($('#complete_yes').is(':checked'));
}

以上内容大致可译为：

加载文档时，请执行以下操作：
将“change”事件的事件处理程序添加到名称为“input”的<{1}}'类型的任何元素
当事件处理程序触发时，切换ID为“complete”的元素的可见性，如果选中ID为“repair_complete”的元素，则该元素应该可见

更新：上面的JS现在实际上做了你想要的，最初我把它写成onclick

Answer 2

因为你的javascript没有包含在一个函数中，所以浏览器只要“到达它”就会执行它。在这种情况下，JS在浏览器到达声明表单的html之前正在执行。

因此，最简单的方法是将Javascript移到表单之后。一个更强大的解决方案是将代码包装在一个函数中，并以某种方式触发 - 从你看起来想要做的事情，在这种情况下，它将是body标签的onLoad事件：

<head>
<script language="JavaScript"> 
  function showHelpDiv() {  
    if (document.getElementById('complete_yes').checked) {
     document.getElementById('repair_complete').style.display = 'block';
    } else {
     document.getElementById('repair_complete').style.display = 'none';
    }
  }
</script>
</head>
<body onload="showHelpDiv()">
 <form action="javascript_test.php" method="POST">
  <input id="complete_yes" type="radio" name="complete" checked="checked" value="true"/>Yes
  <input id="complete_no" type="radio" name="complete" value="false"/>No
  <input type="submit" value="Save">
   <div id="repair_complete">
    I'm a div!
   </div>

Answer 3

这是因为Javascript是在创建其余对象之前执行的将您的javascript代码放入函数体中，并将此函数添加到onclick事件中，以满足您的需要。

<link href="styles/style1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript"> 
function test() {
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
   } else {
     document.getElementById('repair_complete').style.display = 'none';
  }
}
</script>
<form action="javascript_test.php" method="POST">
<input id="complete_yes" type="radio" name="complete" checked="checked" value="true" onClick="javascript: test();"/>Yes
<input id="complete_no" type="radio" name="complete" value="false" onClick="javascript: test();"/>No
<input type="submit" value="Save">
 <div id="repair_complete">
  I'm a div!
 </div>
</form>

Answer 4

在我看来你的脚本在绘制表单之前就已经触发了，你可能希望将脚本块移动到表单元素之后。基本上我认为document.getElementById（'complete_yes'）。checked正在查看null.checked，这将触发对象所需的错误。

Answer 5

您应该使单选按钮的操作更改div的可见性（即，将状态“推”到它），而不是在渲染时通过单选按钮状态“拉”div状态（正如安德烈斯所说，将会被取消）。

Answer 6

听起来问题出在您的初始化代码中。在页面完成渲染之前调用javascript。这是“onload”事件的一个令人讨厌的方面，在我看来，它在每个浏览器中都不起作用。

有一种跨浏览器技术可以在DOM完全加载后调用一次初始化代码。

在HTML的HEAD中尝试此代码：

function showHelpDiv() {  
  if (document.getElementById('complete_yes').checked) {
   document.getElementById('repair_complete').style.display = 'block';
  } else {
   document.getElementById('repair_complete').style.display = 'none';
  }
}

function InitOnce()
{
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    showHelpDiv();
}

/* for Mozilla */
if (document.addEventListener)
{
    document.addEventListener("DOMContentLoaded", InitOnce, null);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
        document.write("<script defer src=ie_onload.js><"+"/script>");
/*@end @*/

/* for other browsers */
window.onload = InitOnce;

然后你需要创建一个 ie_onload.js 文件，其中包含用于IE兼容性的这一行：

InitOnce();

我尝试过其他技术，但没有一种方法像这样完美。我相信我最初在这里找到了这个解决方案 http://dean.edwards.name/weblog/2005/09/busted/

我在一个在线应用程序中使用它，每天接收500次独特访问，这对我们来说是可靠的。

使用JavaScript自动根据单选按钮的状态显示div

6 个答案: