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