我正在为学校使用 HTML、CSS 和一点 JavaScript 创建一个新网站，但我遇到了障碍。我是网站创建的新手，这将是我建立的第二个网站，所以请多多包涵。
我的代码如下：
gd.html：
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="./JavaScript/shadowbox/shadowbox.css">
<script src="./JavaScript/shadowbox/shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();</script>
<script src="./JavaScript/gdScript.js"></script>
<title>The Web Page</title>
</head>
<body id="gd">
<ul id="navigation">
<li><a id="nav-index" href="index.html"></a></li>
<li><a id="nav-gd" href="gd.html">Gaming Desktops</a></li>
<li><a id="nav-ws" href="ws.html">Work Stations</a></li>
<li><a id="nav-hd" href="hd.html">Home Desktops</a></li>
<li><a id="nav-ocs" href="ocs.html">Other Computer Sizes</a></li>
<li><a id="nav-gdht" href="gdht.html">Guides and How To's</a></li>
<li><a id="nav-about" href="about.html">About</a></li>
</ul>
<div id="main">
<h1>The Gaming Desktop Page.</h1>
<p id="question">Firstly are you sure you want to build a full size gaming desktop?</p>
<br>
<p id="center">A full sized desktop (ATX) will take up a massive amount of space, about a meter and a half in verticle space! Look at the "Other Computer Sizes" tab if you want something with the same power but much smaller.</p>
<br><br>
<div id="options"><button type="button" id="continue" onclick="switchtogames()">Yes</button></div>
<div id="options">No</div>
</ul>
</div>
<div id ="footer">
<h1 id="footer-text">Copyright MystPhysX, 2013</h1>
</div>
</body>
gd 复制.html：
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type="text/javascript" src="./JavaScript/gdScript.js"></script>
<link rel="stylesheet" type="text/css" href="./JavaScript/shadowbox/shadowbox.css">
<script type="text/javascript" src="./JavaScript/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<title>The Web Page</title>
</head>
<body id="gd">
<ul id="navigation">
<li><a id="nav-index" href="index.html"></a></li>
<li><a id="nav-gd" href="gd.html">Gaming Desktops</a></li>
<li><a id="nav-ws" href="ws.html">Work Stations</a></li>
<li><a id="nav-hd" href="hd.html">Home Desktops</a></li>
<li><a id="nav-ocs" href="ocs.html">Other Computer Sizes</a></li>
<li><a id="nav-gdht" href="gdht.html">Guides and How To's</a></li>
<li><a id="nav-about" href="about.html">About</a></li>
</ul>
<div id="main">
<h1>The Gaming Desktop Page.</h1>
<p id="question">Okay, time for a quiz!</p>
<br>
<p id="center">This quiz will determine what parts I am going to recommend for your new gaming desktop. Please play along for a while!</p>
<p id="center">Okay first question: <i><b>"What kind of games are you going to play?"</b></i> I need you to answer this question to see what level of graphics you are going to be playing at.</p>
<br>
<div id="imageoption">
<a id="gallery" href="./Images/minecraft3.jpg" rel="shadowbox[Minecraft]"></a>
<a id="gallery" href="./Images/minecraft2.jpg" rel="shadowbox[Minecraft]"></a>
<a href="./Images/minecraft1.jpg" rel="shadowbox[Minecraft]">
<img id="games1" src="./Images/minecraft.png">
<p id="gametitle1"><b>Minecraft: </b><i>Low</i></p>
<p id="gametext1">
<i>
Minecraft is a sandbox indie game originally created by Markus "Notch" Persson. The creative and building aspects of Minecraft allow players to build constructions out of textured cubes in a 3D procedurally generated world. Other activities in the game include exploration, gathering resources, crafting, and combat. Minecraft does not require much resources and can be run on the most basic of gaming computers without any worries.
<button id="gamechoice" onclick="minecraft()">
Choose Minecraft
</button>
</i>
</p>
</a>
</div>
<div id="imageoption">
<a id="gallery" href="./Images/Borderlands1.jpg" rel="shadowbox[Borderlands 2]"></a>
<a id="gallery" href="./Images/Borderlands2.jpg" rel="shadowbox[Borderlands 2]"></a>
<a href="./Images/Borderlands3.jpg" rel="shadowbox[Borderlands 2]">
<img id="games2" src="./Images/borderlands.png">
<p id="gametitle2"><b>Borderlands 2: </b><i>Medium</i></p>
<p id="gametext2">
<i>
Borderlands 2 is an action role-playing first-person shooter ("loot and shoot") video game. It is the sequel to 2009's Borderlands and like the first game, Borderlands 2 players complete a campaign consisting of central quests and optional side-missions as one of four "vault hunters" on the planet Pandora. Key gameplay features from the original game, such as online collaborative campaign gameplay; randomly generated loot, such as weapons and shields are found in Borderlands 2. A mid-range gaming computer will be able to run Borderlands 2.
<button id="gamechoice" onclick="borderlands2()">
Choose Borderlands 2
</button>
</i>
</p>
</a>
</div>
<div id="imageoption">
<a id="gallery" href="./Images/Crysis1.png" rel="shadowbox[Crysis 3]"></a>
<a id="gallery" href="./Images/Crysis2.png" rel="shadowbox[Crysis 3]"></a>
<a href="./Images/Crysis3.png" rel="shadowbox[Crysis 3]">
<img id="games1" src="./Images/crysis.png">
<p id="gametitle1"><b>Crysis 3: </b><i>High</i></p>
<p id="gametext1">
<i>
Crysis 3 is a first-person shooter video game developed by Crytek running on Cryengine game engine. It is the third main installment of the Crysis series, a sequel to the 2011 video game Crysis 2, and runs on the CryEngine 3 game engine. It was one of the most anticipated upcoming games of 2013. Crysis 3 is one of the most demanding games released this year and will require a very powerful gaming computer to run.
<button id="gamechoice" onclick:"crysis3()">
Choose Crysis 3
</button>
</i>
</p>
</a>
</div>
</div>
<div id ="footer">
<h1 id="footer-text">Copyright Elijah, 2013</h1>
</div>
gdScript.js：
function switchtogames()
{
document.getElementById('main').innerHTML= '<h1>The Gaming Desktop Page.</h1>\
<p id="question">Okay, time for a quiz!</p>\
<br>\
<p id="center">This quiz will determine what parts I am going to recommend for your new gaming desktop. Please play along for a while!</p>\
<p id="center">Okay first question: <i><b>"What kind of games are you going to play?"</b></i> I need you to answer this question to see what level \
of graphics you are going to be playing at.</p>\
<br>\
<div id="imageoption">\
<a id="gallery" href="./Images/minecraft3.jpg" rel="shadowbox[Minecraft]"></a>\
<a id="gallery" href="./Images/minecraft2.jpg" rel="shadowbox[Minecraft]"></a>\
<a href="./Images/minecraft1.jpg" rel="shadowbox[Minecraft]">\
<img id="games1" src="./Images/minecraft.png">\
<p id="gametitle1"><b>Minecraft: </b><i>Low</i></p>\
<p id="gametext1">\
<i>\
Minecraft is a sandbox indie game originally created by Markus "Notch" Persson. The creative and building aspects of Minecraft allow players to build constructions out of textured cubes in a 3D\
procedurally generated world. Other activities in the game include exploration, gathering resources, crafting, and combat. Minecraft does not require much resources and can be run on the most basic \
of gaming computers without any worries.\
<button id="gamechoice" onclick="minecraft()">\
Choose Minecraft\
</button>\
</i>\
</p>\
</a>\
</div>\
<div id="imageoption">\
<a id="gallery" href="./Images/Borderlands3.jpg" rel="shadowbox[Borderlands 2]"></a>\
<a id="gallery" href="./Images/Borderlands2.jpg" rel="shadowbox[Borderlands 2]"></a>\
<a href="./Images/Borderlands1.jpg" rel="shadowbox[Borderlands 2]">\
<img id="games2" src="./Images/borderlands.png">\
<p id="gametitle2"><b>Borderlands 2: </b><i>Medium</i></p>\
<p id="gametext2">\
<i>\
Borderlands 2 is an action role-playing first-person shooter ("loot and shoot") video game. It is the sequel to 2009s Borderlands and like the first game, Borderlands 2 players complete a campaign\
consisting of central quests and optional side-missions as one of four "vault hunters" on the planet Pandora. Key gameplay features from the original game, such as online collaborative campaign\
gameplay; randomly generated loot, such as weapons and shields are found in Borderlands 2. A mid-range gaming computer will be able to run Borderlands 2.\
<button id="gamechoice" onclick="borderlands2()">\
Choose Borderlands 2\
</button>\
</i>\
</p>\
</a>\
</div>\
<div id="imageoption">\
<a id="gallery" href="./Images/Crysis3.png" rel="shadowbox[Crysis 3]"></a>\
<a id="gallery" href="./Images/Crysis2.png" rel="shadowbox[Crysis 3]"></a>\
<a href="./Images/Crysis1.png" rel="shadowbox[Crysis 3]">\
<img id="games1" src="./Images/crysis.png">\
<p id="gametitle1"><b>Crysis 3: </b><i>High</i></p>\
<p id="gametext1">\
<i>\
Crysis 3 is a first-person shooter video game developed by Crytek running on Cryengine game engine. It is the third main installment of the Crysis series, a sequel to the 2011 video game Crysis 2, \
and runs on the CryEngine 3 game engine. It was one of the most anticipated upcoming games of 2013. Crysis 3 is one of the most demanding games released this year and will require a very powerful gaming \
computer to run.\
<button id="gamechoice" onclick:"crysis3()">\
Choose Crysis 3\
</button>\
</i>\
</p>\
</a>\
</div>';
}
我想要做的是将 gd.html 的 div#main 中的代码替换为 gd copy.html 的 div#main 中的代码。我在我的网站上使用了一个名为Shadowbox的 Javascript 图像库来处理几个图像，它在 gd copy.html 中完美运行，但是当我如上所述替换内容时无法运行。被复制的代码来自 gd copy.html （我用它作为模板）所以我不明白为什么它不应该工作。
如果可以的话请帮忙！
如果需要，这里是所有文件。