javascript - Dynamically load html using JS -
this code : link
1) trying load html dynamically. when click on login options, login appears , when click on other tabs (left column) login appears again. want see login in login options.
2) when click on login option twice code draw 2 login wrappers. want draw one. how can that?
function changecontent(page) { var pagecontent = document.getelementbyid('page'); var title = document.getelementbyid('head') var boxwrapper = document.getelementbyid('box'); var feeds = document.getelementbyid('feed-block'); var chat = document.getelementbyid('chat'); var rightcontent = document.getelementbyid('right'); var inputwrapper = document.createelement("div"); inputwrapper.classname += " login-wrapper"; var input = document.createelement('div'); input.classname += " input"; var usr = document.createelement("input"); usr.placeholder = "username"; usr.classname += " usr"; usr.addeventlistener("click", onblur(this)); usr.addeventlistener("click", onfocus(this)); var fausr = document.createelement("span"); fausr.classname += " fa fa-user"; var sameinput = document.createelement('div'); sameinput.classname += " input" var pass = document.createelement("input"); pass.placeholder = "password"; pass.classname += " pass"; pass.addeventlistener("click", onblur(this)); pass.addeventlistener("click", onfocus(this)); var fapass = document.createelement("span"); fapass.classname += " fa fa-lock"; var btn = document.createelement("button"); btn.innerhtml = "login"; btn.classname += " login-btn"; rightcontent.appendchild(inputwrapper); inputwrapper.appendchild(input); inputwrapper.appendchild(sameinput); inputwrapper.appendchild(btn); input.appendchild(usr); input.appendchild(fausr); sameinput.appendchild(pass); sameinput.appendchild(fapass); switch (page) { default: alert("this shouldn't happen..."); break; case "dashboard": pagecontent.innerhtml = 'dashboard'; title.innerhtml = 'dashboard'; boxwrapper.style.display = 'flex'; feeds.style.display = 'block'; chat.style.display = 'block'; inputwrapper.style.display = 'none'; break; case "settings": pagecontent.innerhtml = 'settings'; title.innerhtml = 'settings'; boxwrapper.style.display = 'flex'; feeds.style.display = 'block'; chat.style.display = 'block'; inputwrapper.style.display = 'none'; break; case "list menu item": pagecontent.innerhtml = 'list menu item'; title.innerhtml = 'list menu item'; boxwrapper.style.display = 'flex'; feeds.style.display = 'block'; chat.style.display = 'block'; inputwrapper.style.display = 'none'; break; case "calendar": pagecontent.innerhtml = 'calendar'; title.innerhtml = 'calendar'; boxwrapper.style.display = 'flex'; feeds.style.display = 'block'; chat.style.display = 'block'; inputwrapper.style.display = 'none'; break; case "pages": pagecontent.innerhtml = 'pages'; title.innerhtml = 'pages'; boxwrapper.style.display = 'flex'; feeds.style.display = 'block'; chat.style.display = 'block'; inputwrapper.style.display = 'none'; break; case "login options": pagecontent.innerhtml = 'login options'; title.innerhtml = 'login options'; boxwrapper.style.display = 'none'; feeds.style.display = 'none'; chat.style.display = 'none'; inputwrapper.style.display = 'block'; break; } }
Comments
Post a Comment