html - Javascript does'nt switch div visibility -

html - Javascript does'nt switch div visibility -

i'm working on script allow me alter div visible, right does'nt work , can't figure out why.

could help me find solution ?

html

<div id="send2" style="visibility: hidden; position: absolute"> <iframe src="http://en.wikipedia.org/wiki/mascarene_martin" name="send request" width="960px" height="577px" frameborder="0" scrolling="yes"> </iframe> </div> <div id="send3" style="visibility: hidden; position: absolute"> <iframe src="http://en.wikipedia.org/wiki/acacia_cultriformis" name="send request" width="960px" height="577px" frameborder="0" scrolling="no"> </iframe> </div> <div id="send4" style="visibility: hidden; position: absolute"> <iframe src="http://en.wikipedia.org/wiki/battle_of_halmyros" width="960px" height="577px" frameborder="0" scrolling="no"> </iframe> </div> <div id="send5" style="visibility: hidden; position: absolute"> <iframe src="http://en.wikipedia.org/wiki/new_detroit_arena" width="960px" height="577px" frameborder="0" scrolling="no"> </iframe> </div> <div id="nav_buttons"> <button id="previous" onclick="switchpagebackward()" style="margin-top: 614px">previous </button> <button id="next" onclick="switchpageforward()" style="margin-top: 614px">next </button> </div>

script

page1.style.visibility="visible" page2.style.visibility="hidden" page3.style.visibility="hidden" page4.style.visibility="hidden" page5.style.visibility="hidden" function switchpageforward() { var page1 = document.getelementbyid("send1"); var page2 = document.getelementbyid("send2"); var page3 = document.getelementbyid("send3"); var page4 = document.getelementbyid("send4"); var page5 = document.getelementbyid("send5"); if (page4.style.visibility == "visible") { page4.style.visibility="hidden"; page5.style.visibility="visible"; } if (page3.style.visibility == "visible") { page3.style.visibility="hidden"; page4.style.visibility="visible"; } if (page2.style.visibility == "visible") { page2.style.visibility="hidden"; page3.style.visibility="visible"; } else if (page2.style.visibility == "visible") { page2.style.visibility="hidden"; page3.style.visibility="visible"; } if (page1.style.visibility == "visible"){ page1.style.visibility="hidden"; page2.style.visibility="visible"; } else if (page1.style.visibility == "visible") { page1.style.visibility="hidden"; page3.style.visibility="visible"; } else if (page1.style.visibility == "visible") { page1.style.visibility="hidden"; page4.style.visibility="visible"; } } function switchpagebackward() { var page1 = document.getelementbyid("send1"); var page2 = document.getelementbyid("send2"); var page3 = document.getelementbyid("send3"); var page4 = document.getelementbyid("send4"); var page5 = document.getelementbyid("send5"); if (page2.style.visibility == "visible") { page2.style.visibility="hidden"; page1.style.visibility="visible"; } if (page3.style.visibility == "visible") { page3.style.visibility="hidden"; page2.style.visibility="visible"; } else if (page3.style.visibility == "visible") { page3.style.visibility="hidden"; page1.style.visibility="visible"; } if (page4.style.visibility == "visible") { page4.style.visibility="hidden"; page3.style.visibility="visible"; } else if (page4.style.visibility == "visible") { page4.style.visibility="hidden"; page2.style.visibility="visible"; } else if (page5.style.visibility == "visible") { page4.style.visibility="hidden"; page1.style.visibility="visible"; } if (page5.style.visibility == "visible") { page4.style.visibility="hidden"; } }

when click on next, page_x become invisible , page_x+1 become visible.(previous button reverse process).

jsfiddle : http://jsfiddle.net/6lpq8p5x/

my friend if code javascript writing in megabytes, please refer jsfiddle fork: http://jsfiddle.net/sameersemna/p5yzll18/

function hideallpages(){ for(var i=1; i<=5; i++){ document.getelementbyid("send"+i).style.visibility="hidden"; } } function switchpageforward() { if(current_page<5){ current_page++; hideallpages(); document.getelementbyid("send"+current_page).style.visibility="visible"; } } function switchpagebackward() { if(current_page>1){ current_page--; hideallpages(); document.getelementbyid("send"+current_page).style.visibility="visible"; } } hideallpages(); var current_page = 0; switchpageforward();

javascript html iframe visibility