HTML、CSS、および学校用の小さな JavaScript を使用して新しい Web サイトを作成していますが、壁にぶつかりました。私はウェブサイトの作成が初めてで、これは私が構築した2番目のウェブサイトになりますので、ご容赦ください.
私のコードは次のとおりです。
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 copy.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 (テンプレートとして使用したもの) からのものであるため、なぜ機能しないのかわかりません。
できれば助けてください！
必要に応じて、ここにすべてのファイルがあります。