使用innerHTML

Question

我正在嘗試使用注冊表單和登錄表單構建一個一頁簡單的應用程序。 我使用此功能在不同的“ div”標簽之間進行切換：

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

我無法在瀏覽器中確認您的觀察。 但是， HTML5 hidden屬性指示不應渲染元素。 這可能與您的問題有關。