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

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

transpose - Maple isnt executing function but prints function term -