javascript - How to propagate a chain of divs? -

javascript - How to propagate a chain of divs? -

i have series of statuses want output outlined here divs:

<div> <div id="startbuttondiv"> <button id="start" onclick="verifyaccount();">start</button> </div> <div id="conversationdiv"> <label>what name?</label><input type="text" id="name" /> <button id="sendname" onclick="sendname();">send</button> <p id="response"></p> </div> <div id="verifyaccountdiv"> <label>account verified</label> <button id="checkbillingbutton" onclick="billing();">check billing</button> </div> <div id="billingdiv"> <label>billing checked</label> <button id="activationbutton" onclick="activation();">activate device</button> </div> <div id="deviceactivationdiv"> device activated! </div>

here functions called on clicks:

function replacediv(olddiv, newdiv) { document.getelementbyid(olddiv).innerhtml = document.getelementbyid(newdiv).innerhtml; } function verifyaccount() { sleep(500));//simulate authentication replacediv("startbuttondiv","verifyaccountdiv"); } function billing() { sleep(500);//simulate billing replacediv("verifyaccountdiv", "billingdiv"); } function activation() { sleep(500);//simulate device activation replacediv("billingdiv", "deviceactivationdiv"); }

however, first function call, verifyaccount(). when click check billing button, nil happens. because div replaced first? see problem?

the reason you're having issue aren't replacing actual divs. instead, you're replacing content of divs. in other words, when phone call first function, verifyaccount(), go this:

<div id="startbuttondiv"> <button id="start" onclick="verifyaccount();">start</button> </div>

to this:

<div id="startbuttondiv"> <label>account verified</label> <button id="checkbillingbutton" onclick="billing();">check billing</button> </div>

notice how id of div doesn't alter startbuttondiv verifyaccountdiv. because instead of replacing actual divs, you're changing content (this .innerhtml does).

in order prepare issue, recommend changing js functions, i.e.:

function billing() { sleep(500); replacediv("startbuttondiv", "billingdiv"); } function activation() { sleep(500); replacediv("startbuttondiv", "deviceactivationdiv"); }

you replace divs themselves, or alter ids. however, if ever want go back, you'll run problems. additionally, recommend utilize library if you're going going through lots of dom editing js - makes code cleaner, easier understand, , more reliable.

javascript html