使用innerHTML

Question

我正在嘗試使用註冊表單和登錄表單構建一個簡單的單頁應用程序。 我用這個功能，不同的 「格」 標籤之間切換：

function replaceContentInContainer(target, source) 
    {   
     document.getElementById(target).innerHTML = document.getElementById(source).innerHTML; 


    } 

由於某種原因，它不工作時，我把它在這以下的div：

<div id="gameOptions" class="contentBox" hidden > 
      <div class="innerBox" > 
       <P> 
        <STRONG>Number of balls:</STRONG> 
        <SELECT id="number_of_balls"> 
         <OPTION>50 </OPTION> 
         <OPTION>60 </OPTION> 
         <OPTION>70 </OPTION> 
         <OPTION>80 </OPTION> 
         <OPTION>90 </OPTION> 
        </SELECT> 
       </P> 
       <P> 
        <STRONG>Number of ghosts:</STRONG> 
        <SELECT id="number_of_ghosts"> 
         <OPTION>3 </OPTION> 
         <OPTION>2 </OPTION> 
         <OPTION>1 </OPTION>  
        </SELECT> 
       </P> 
       <p> 
        <h4 style="display:inline;color:#000000;">High score food:</h4> 
        <input id="highScore_color" type="color" value="#F50905" /> 
        <h4 style="display:inline;color:#000000;margin-left:15px;">Medium score food:</h4> 
        <input id="mediumScore_color" type="color" value="#03FCFC"/> 
        <h4 style="display:inline;color:#000000;margin-left:15px">Low score food:</h4> 
        <input id="lowScore_color" type="color" value="#ffffff"/> 
       </p> 

      </div> 
     </div><!--game options--> 

和：

<div id="reg_screen" class="contentBox" hidden> 
      <div class="innerBox" > 
       <form id="register_form" onsubmit="checkSubmit()" action="" method="post" autocomplete="on" > 
       <br/> 
        <P style="margin:10px 0px 0px 192px;"><STRONG><span id="un_span" style="color:#D70000; visibility:hidden">*</span>User-Name: </STRONG> 
        <INPUT id="username_entred" TYPE = "text" SIZE = "25" ></P> 
        <br/> 
        <P style="margin:10px 0px 0px 205px;" ><STRONG><span id="pw_span" style="color:#D70000 ; visibility:hidden">*</span>Password:</STRONG> 
        <INPUT id="pw_entered" TYPE = "password" SIZE = "25" ></P> 
        <br/> 
        <P style="margin:10px 0px 0px 230px;" ><STRONG><span id="name_span" style="color:#D70000; visibility:hidden">*</span>Name:</STRONG> 
        <INPUT id="private_name" TYPE = "text" SIZE = "25" ></P> 
        <br/> 
        <P style="margin:10px 0px 0px 200px;" ><STRONG><span id="lastName_span" style="color:#D70000 ; visibility:hidden">*</span>LastName:</STRONG> 
        <INPUT id="last_name" TYPE = "text" SIZE = "25" ></P> 
        <br/> 
        <P style="margin:10px 0px 0px 200px;" ><STRONG><span id="date_span" style="color:#D70000; visibility:hidden">*</span>Birth Date:</STRONG> 
        <INPUT id="birth_date" TYPE = "date" width = "100px" ></P> 
        <br/> 
        <P style="text-align:center"> 
        <input type="submit" class="button" value="Sign-In" > </input></P>             
       </form> 
      </div> 
     </div><!-- Register Screen --> 

這個我怎麼用功能：

replaceContentInContainer('reg_screen','gameOptions'); 

Answer 1

我無法在瀏覽器中確認您的觀察結果。但是，the HTML5 hidden attribute指示元素不應呈現爲。這可能與你的問題有關。