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

我有一种将数据发布到同一页面的窗体。基于用户的单选按钮选择，我将checked =“checked”插入到单选按钮表单元素中，以重新显示正确的选择。这工作得很好，但是当表单重新显示时（如果输入错误等），我需要显示div（包含表单中的相关字段）。使用JavaScript自动根据单选按钮的状态显示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>

...但它返回一个必选对象 JavaScript错误（当它在 '真实' 页面所做的）：

信息：对象所需
行：3
字符：1
代码：0
网址：http://localhost/repair_system/javascript_test.php

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

来源

2009-08-05 cw84

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

来源

2009-08-05 20:00:32 Ian

使用onload是一种相当标准的方法，但是如果页面上有大量资源，它会在渲染标记和触发脚本之间造成延迟。请参阅http：// stackoverflow。COM /问题/ 473628 /什么外部的资源，被加载，当用窗的onload事件，是燃煤和乜是获取更多信息的加载事件的顺序。 – Joel 2009-08-05 20:09:54

感谢您的答复 - 运行此代码产生了同样的错误，但... – cw84 2009-08-05 20:12:27

这是因为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>

来源

2009-08-05 19:58:47

你的代码，DOM树还没有准备好。所以它试图访问一个还不存在的元素。

你可能想，而不是写一个事件处理程序切换每当复选框被选中的股利。

我更喜欢jQuery，它将诸如跨浏览器事件处理之类的东西抽象出来，提供了许多不错的帮助器，并且通常使代码看起来更干净（正确编写时）。像这样的东西应该工作：

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

上述大致可以翻译为：

当文档载入，执行以下操作：
为“change”事件添加事件处理程序任何类型为'input'的元素名称为'complete'
当事件处理程序触发时，切换ID为'repair_complete'的元素的可见性，如果t他用ID“complete_yes”元素被选中

更新：JS上面现在实际上是你想要做什么，我本来它写成一个onclick

来源

2009-08-05 20:00:02

它看起来好像您的脚本在绘制表单前触发了，您可能希望将脚本块移到表单元素之后。基本上我认为document.getElementById（'complete_yes'）。checked是看着null.checked，这会触发对象所需的错误。

来源

2009-08-05 20:00:44

你应该让单选按钮的动作是改变div的可见性（也就是将状态“推”到它），而不是通过渲染时的单选按钮状态“拉”div状态时间（正如Andrejs所说的，将会被取消）。

来源

2009-08-05 20:01:41 Ether

听起来像这个问题是在你的初始化代码。 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次独特的访问在线应用程序，这一直是可靠的我们。

来源

2009-08-05 20:26:57

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

回答

相关问题