HTMLで動的にコントロールの表示／非表示を切り替える

HTMLとJavascriptを使って表示されているテキストボックス(INPUTタグ)の表示／非表示を切り替えます。

動的にコントロールの表示／非表示を切り替える

HTMLとJavascriptを使って表示されているテキストボックス(INPUTタグ)の表示／非表示を切り替えます。

テキストボックス(INPUTタグ)の表示／非表示を切り替えるには

テキストボックス(INPUTタグ)の表示／非表示を切り替えるには表示する際にはstyle.visibilityにvisibleを、非表示にする場合にはstyle.visibilityにhiddenを設定します。

テキストボックス(INPUTタグ)の表示／非表示を切り替えるソース

以下がソースです。

＜html＞
＜head＞
＜script type="text/javascript"＞
    function init()
    {
        document.myForm.inputbox1.style.visibility = "visible" ;
    }
    function disp_ctrl()
    {
        if( document.myForm.inputbox1.style.visibility == "visible" ){
           document.myForm.inputbox1.style.visibility = "hidden" ;
           document.myForm.on_off.value = "ボタン表示" ;
        }
        else{
           document.myForm.inputbox1.style.visibility = "visible" ;
           document.myForm.on_off.value = "ボタン消去" ;
        }
    }
＜/script＞
＜/head＞
＜body onLoad="javascript:init();"＞
    ＜form name="myForm"＞
        ＜input type="text" name="inputbox1"＞＜input type="button" name="on_off"
              value="ボタン消去" onClick="javascript:disp_ctrl();"＞
    ＜/form＞
＜/body＞
＜/html＞

実際に動作するボタン

ボタンを押下するとテキストボックス(INPUTタグ)の表示／非表示が入れ替わります。
以下が実際のボタンです。