How do I update text in Javascript?

[pierce111]

Hi everyone. When I get rid of a object on my webpage with ".removeChild", I am not sure how to update the other text on the page. I should point out that I am creating the objects with the ".createElement" command.

Example of what I mean:
You get ten buttons to delete. They all show you which number button they are. If you delete one button, then the rest update their "button number" so there isn't a "gap in the numbering".


If anyone could help, it would be great!

 

[angelwatt]

Well your example isn't very specific. There can be a number of ways to do things depending on the exact HTML you're working with. One thing to look at though is .innerHTML. For instance, if your object was a p tag you could do:

pObject.innerHTML = "New text.";

I think this might be what you're trying to get at. If not, give a little more detail on what you're up to.

 

[pierce111]

Well your example isn't very specific.

Sorry about that. I am rather new to Javascript, so I don't really know how to describe everything yet.

pObject.innerHTML = "New text.";

I think this might be what you're trying to get at. If not, give a little more detail on what you're up to.

Unfortunately, I don't think that would work in this instance... Here's some more details:

Step 1: Creates several "DIV" elements with the command: ".createElement"
Step 2: Sets the text inside the "DIV" tag using ".innerHTML" (different for each element"
Step 3: Shows the user the text with a delete button
[What I want to do]
Step 4: User deletes the text and then the other "DIV" tags adjust the change (the ones above goes down by 1 ex. [Testing 31] to [Testing 30])

I hope that's a better explanation.

 

[angelwatt]

Yes, that explains it better. It sounds like you already have the code for removing the code so I'll just show you some renumbering code that you hopefully can apply to what you have.

HTML

<div id="divs">
  <div>1 <input type="button" value="delete" onclick="RenumberDivs()" /></div>
  <div>2 <input type="button" value="delete" onclick="RenumberDivs()" /></div>
  <div>10 <input type="button" value="delete" onclick="RenumberDivs()" /></div>
</div>

JavaScript

function RenumberDivs()
{
  var divs = document.getElementById("divs").getElementsByTagName("div");
  for (var x=0, y=divs.length; x < y; x++) {
    divs[x].innerHTML = (x+1) + " <input type='button' value='delete'"
      +" onclick='RenumberDivs()' />";
  }
}

For you, you'll want the "Delete" buttons onclick to call your delete function rather than this renumbering function. Then at the end of your delete function you can call the RenumberDivs function. You'll then have to of course make some edits in the JavaScript when it applies the button and onclick attribute.

Hope this helps.

 

[pierce111]

Thanks for your help. I had to edit it a little to do what I needed it to do, but now it works great!