使用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

回答

相關問題