JavaScript：ページロード時に非表示のコントロールを表示したい

Question

RadioButtonListの選択値によってテーブルの表示/非表示を行いたいと下記のJavaScriptを作成しました。

function GetRadioButtonListSelection(RadioButtonListId, TableId) {
    if (typeof RadioButtonListId == 'string') {
        RadioButtonListId = document.getElementById(RadioButtonListId);
    }
    
    var InputItemArray = RadioButtonListId.getElementsByTagName('input');
    var CheckedValue = '';

    for (var i = 0; i < InputItemArray.length; i++) {
        var RadioButtonRef = InputItemArray[i];

        if (RadioButtonRef.checked == true) {
            CheckedValue = RadioButtonRef.value;
            break;
        }
    }

    var TargetTable = document.getElementById(TableId);

    if (CheckedValue == '1') {
        TargetTable.style.visibility = "hidden";
    }
    else if (CheckedValue == '2') {
        TargetTable.style.visibility = "hidden";
    }
    else if (CheckedValue == '3') {
        TargetTable.style.visibility = "visible";
    }
}

これをページロード時に下記のように設定しています。

RadioButtonList1.Attributes("onclick") = "GetRadioButtonListSelection(this,'" & Table1.ClientID & "');"

ページにはDropdownlistが3つあり、ページロード時はそれらのみ表示でその他のコントロールは非表示です。

処理の流れとしては、下記の通りです。

1.Dropdownlistを全て選択
2.TextBox、Button表示
3.TextBox入力後Button押下、RadioButtonListを表示
4.RadioButtonをチェック
5.Table1の表示/非表示

ページロード時にTable1をVisible = Falseにしていると、JavaScriptでTargetTableがNullとなります。
Visible = Trueだと正常に動きます。

これを正常に動かすにはどうしたら良いでしょうか？

宜しくお願い致します。

Answer 1

クライアント側では、要素のスタイル属性をいじっているように、サーバー側でもスタイル属性で操作すればいいと思います。

Table1.Attributes["style"] = "visibility: hidden";

または、ASPX側で予めstyleを設定しておくとか。

<table runat="server" ID="Table1" style="visibility: hidden">

Answer 2

> ページロード時にTable1をVisible = Falseにしていると、
> JavaScriptでTargetTableがNullとなります。

ASP.NET が生成する html コードを見てみましたか？

「Table1をVisible = False」では html コードに Table1 が
存在しないので、「JavaScriptでTargetTableがNull」になる
のだと思います。

JavaScript が動かないというのはクライアント側の問題なの
ですから、そういう場合は ASP.NET が生成したクライアント
側のコードも見る習慣をつけることをお勧めします。

> これを正常に動かすにはどうしたら良いでしょうか？

かるあさんのレスを参照ください。

Answer 3

かるあ様、SurferOnWww様、ありがとうございます。

かるあ様の方法で無事解決する事が出来ました。

ありがとうございました。

SurferOnWww様、アドバイスありがとうございます。

これからはコードを見るようにします。