使用innerHTML

时间:2014-04-19 13:16:09

标签: javascript html

我正在尝试使用注册表单和登录表单构建一个单页的简单应用程序。 我用这个函数在不同的“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');

1 个答案:

答案 0 :(得分:1)

我无法在浏览器中确认您的观察结果。但是,the HTML5 hidden attribute表示不应呈现元素。这可能与您的问题有关。