html - Replacing page content using JavaScript not working -
i'm creating new website using html, css , little javascript school , have run wall. new website creation , second website i've built please bear me.
my code follows:
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 , 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 sure want build full size gaming desktop?</p> <br> <p id="center">a full sized desktop (atx) take massive amount of space, meter , half in verticle space! @ "other computer sizes" tab if want same power 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 , 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 quiz!</p> <br> <p id="center">this quiz determine parts going recommend new gaming desktop. please play along while!</p> <p id="center">okay first question: <i><b>"what kind of games going play?"</b></i> need answer question see level of graphics going 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 sandbox indie game created markus "notch" persson. creative , building aspects of minecraft allow players build constructions out of textured cubes in 3d procedurally generated world. other activities in game include exploration, gathering resources, crafting, , combat. minecraft not require resources , can run on basic of gaming computers without 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 action role-playing first-person shooter ("loot , shoot") video game. sequel 2009's borderlands , first game, borderlands 2 players complete campaign consisting of central quests , optional side-missions 1 of 4 "vault hunters" on planet pandora. key gameplay features original game, such online collaborative campaign gameplay; randomly generated loot, such weapons , shields found in borderlands 2. mid-range gaming computer able 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 first-person shooter video game developed crytek running on cryengine game engine. third main installment of crysis series, sequel 2011 video game crysis 2, , runs on cryengine 3 game engine. 1 of anticipated upcoming games of 2013. crysis 3 1 of demanding games released year , require powerful gaming computer 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 quiz!</p>\ <br>\ <p id="center">this quiz determine parts going recommend new gaming desktop. please play along while!</p>\ <p id="center">okay first question: <i><b>"what kind of games going play?"</b></i> need answer question see level \ of graphics going 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 sandbox indie game created markus "notch" persson. creative , building aspects of minecraft allow players build constructions out of textured cubes in 3d\ procedurally generated world. other activities in game include exploration, gathering resources, crafting, , combat. minecraft not require resources , can run on basic \ of gaming computers without 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 action role-playing first-person shooter ("loot , shoot") video game. sequel 2009s borderlands , first game, borderlands 2 players complete campaign\ consisting of central quests , optional side-missions 1 of 4 "vault hunters" on planet pandora. key gameplay features original game, such online collaborative campaign\ gameplay; randomly generated loot, such weapons , shields found in borderlands 2. mid-range gaming computer able 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 first-person shooter video game developed crytek running on cryengine game engine. third main installment of crysis series, sequel 2011 video game crysis 2, \ , runs on cryengine 3 game engine. 1 of anticipated upcoming games of 2013. crysis 3 1 of demanding games released year , require powerful gaming \ computer run.\ <button id="gamechoice" onclick:"crysis3()">\ choose crysis 3\ </button>\ </i>\ </p>\ </a>\ </div>'; } what i'm trying replace code in gd.html's div#main code gd copy.html's div#main. i'm using javascript image gallery called shadowbox on website couple images , works in gd copy.html fails work when replace content described above. code getting copied on gd copy.html (i used template) don't see why shouldn't work.
please if can!
here files if want them.
the reason not working because when shadowbox.init() called looks rel='shadowbox' elements on page. because dynamically adding new content have reinitialize shadowbox.
try this:
function switchtogames() { document.getelementbyid('main').innerhtml= 'your html'; shadowbox.setup(); }
Comments
Post a Comment