javascript - Function Call, Delay, Then Function Call again -

javascript - Function Call, Delay, Then Function Call again -

i'm trying write code 2 step function rewrite navlinks. have remove links function, function adds 1 set of links, button doing same thing different links. have. (html components in 1)

class="snippet-code-js lang-js prettyprint-override"> function execfunction() { removelinks(); linksaddset1(); } function execfunction2() { removelinks(); linksaddset2(); } function removelinks() { var list = document.getelementbyid("output2"); list.removechild(list.childnodes[0]); list.removechild(list.childnodes[0]); list.removechild(list.childnodes[0]); list.removechild(list.childnodes[0]); list.removechild(list.childnodes[0]); list.removechild(list.childnodes[0]); } function linksaddset1() { var out = document.getelementbyid("output2"); var args = ["about", "games", "the hideout", "staff", "donate", "contact us", ]; function displaymenu() { var ul = document.createelement('ul'); ul.classname = "mainmenu"; args.foreach(function(name, index) { var li = document.createelement('li'), = document.createelement('a'); li.classname = "mmenu-item-" + index; li.setattribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css"; an.innerhtml = name; an.setattribute('href', "http://www.thegaminghideout.com/" + name + ".html"); li.appendchild(an); ul.appendchild(li); }); out.appendchild(ul); } if (output2.childnodes.length > 0) {} else { displaymenu(); } } function linksaddset2() { var list = document.getelementbyid("output2"); var out = document.getelementbyid("output2"); var args = ["tools", "tutorials"]; function displaymenu() { var ul = document.createelement('ul'); ul.classname = "mainmenu"; args.foreach(function(name, index) { var li = document.createelement('li'), = document.createelement('a'); li.classname = "mmenu-item-" + index; li.setattribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css"; an.innerhtml = name; an.setattribute('href', "http://www.thegaminghideout.com/" + name + ".html"); li.appendchild(an); ul.appendchild(li); }); out.appendchild(ul); } if (output2.childnodes.length > 0) {} else { displaymenu(); } } class="snippet-code-css lang-css prettyprint-override"> #navigation { width: 760px; height: 35px; position: absolute; border-bottom: 2px solid #000000; background: orange; padding: 0px; } #navigation .padding { padding: 2px; } #navigation .navlinks { position: absolute; top: 1px; left: 0px; } #navigation .navlinks ul { margin: 0px; padding: 0px; text-align: center; list-style-type: none; width: 760px; height: 35px; } #navigation .navlinks li { position: relative; top: 5px; margin: 0px 5px 0px 5px; list-style-type: none; display: inline; } #navigation .navlinks li { color: #000000; padding: 5px 0px 9px 0px; text-decoration: none; font-size: 18px; font-family: karmatic_arcaderegular; padding: 5px 0px 9px 0px; } #navigation .navlinks li a:hover { margin: 0px; color: #ffffff; background: orange; text-decoration: underline; } class="snippet-code-html lang-html prettyprint-override"><div id="navigation"> <div class="navlinks"> <div id="output2"> <ul class="mainmenu"> <li class="mmenu-item-0"> <a href="http://www.thegaminghideout.com/about.html">about</a> </li> <li class="mmenu-item-1"> <a href="http://www.thegaminghideout.com/games.html">games</a> </li> <li class="mmenu-item-2"> <a href="http://www.thegaminghideout.com/the hideout.html">the hideout</a> </li> <li class="mmenu-item-3"> <a href="http://www.thegaminghideout.com/staff.html">staff</a> </li> <li class="mmenu-item-4"> <a href="http://www.thegaminghideout.com/donate.html">donate</a> </li> <li class="mmenu-item-5"> <a href="http://www.thegaminghideout.com/contact us.html">contact us</a> </li> </ul> </div> </div> <br> <br> <br> <button onclick="removelinks()">remove links</button> <button onclick="execfunction()">link set 1</button> <button onclick="execfunction2()">link set 2</button>

the execfunction() , execfunction2() breaks it. have when link set 1 clicked, executes execfunction(), should execute removelinks() function, add together links next linksaddset1() or linksaddset2(). doesn't seem have delay, makes both functions run @ same time, causing either disfunction or have links create instantly have removelinks() function remove both of them. way set "delay" between 2 function calls can have them both execute safely?

i don't think need delay. trying fine when executed in sequence. there script error in removelinks function. had fixed , works expected. see fiddle demo

function removelinks() { var list = document.getelementbyid("output2"); //http://stackoverflow.com/a/683429/297641 while (list.haschildnodes()) { list.removechild(list.lastchild); } } code snippet

class="snippet-code-js lang-js prettyprint-override">function execfunction() { removelinks(); linksaddset1(); } function execfunction2() { removelinks(); linksaddset2(); } function removelinks() { var list = document.getelementbyid("output2"); while (list.haschildnodes()) { list.removechild(list.lastchild); } } function linksaddset1() { var out = document.getelementbyid("output2"); var args = ["about", "games", "the hideout", "staff", "donate", "contact us", ]; function displaymenu() { var ul = document.createelement('ul'); ul.classname = "mainmenu"; args.foreach(function (name, index) { var li = document.createelement('li'), = document.createelement('a'); li.classname = "mmenu-item-" + index; li.setattribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css"; an.innerhtml = name; an.setattribute('href', "http://www.thegaminghideout.com/" + name + ".html"); li.appendchild(an); ul.appendchild(li); }); out.appendchild(ul); } if (output2.childnodes.length > 0) {} else { displaymenu(); } } function linksaddset2() { var list = document.getelementbyid("output2"); var out = document.getelementbyid("output2"); var args = ["tools", "tutorials"]; function displaymenu() { var ul = document.createelement('ul'); ul.classname = "mainmenu"; args.foreach(function (name, index) { var li = document.createelement('li'), = document.createelement('a'); li.classname = "mmenu-item-" + index; li.setattribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css"; an.innerhtml = name; an.setattribute('href', "http://www.thegaminghideout.com/" + name + ".html"); li.appendchild(an); ul.appendchild(li); }); out.appendchild(ul); } if (output2.childnodes.length > 0) {} else { displaymenu(); } } class="snippet-code-css lang-css prettyprint-override">#navigation { width: 760px; height: 35px; position: absolute; border-bottom: 2px solid #000000; background: orange; padding: 0px; } #navigation .padding { padding: 2px; } #navigation .navlinks { position: absolute; top: 1px; left: 0px; } #navigation .navlinks ul { margin: 0px; padding: 0px; text-align: center; list-style-type: none; width: 760px; height: 35px; } #navigation .navlinks li { position: relative; top: 5px; margin: 0px 5px 0px 5px; list-style-type: none; display: inline; } #navigation .navlinks li { color: #000000; padding: 5px 0px 9px 0px; text-decoration: none; font-size: 18px; font-family: karmatic_arcaderegular; padding: 5px 0px 9px 0px; } #navigation .navlinks li a:hover { margin: 0px; color: #ffffff; background: orange; text-decoration: underline; } class="snippet-code-html lang-html prettyprint-override"><div id="navigation"> <div class="navlinks"> <div id="output2"> <ul class="mainmenu"> <li class="mmenu-item-0"> <a href="http://www.thegaminghideout.com/about.html">about</a> </li> <li class="mmenu-item-1"> <a href="http://www.thegaminghideout.com/games.html">games</a> </li> <li class="mmenu-item-2"> <a href="http://www.thegaminghideout.com/the hideout.html">the hideout</a> </li> <li class="mmenu-item-3"> <a href="http://www.thegaminghideout.com/staff.html">staff</a> </li> <li class="mmenu-item-4"> <a href="http://www.thegaminghideout.com/donate.html">donate</a> </li> <li class="mmenu-item-5"> <a href="http://www.thegaminghideout.com/contact us.html">contact us</a> </li> </ul> </div> </div> <br> <br> <br> <button onclick="removelinks()">remove links</button> <button onclick="execfunction()">link set 1</button> <button onclick="execfunction2()">link set 2</button>

javascript jquery html