JavaScript update variable name

Question

Sorry for the noob question as I just picked up javascript today.

I'm trying to create and delete div's with javascript buttons, and I have that working fairly well.

However when I delete,for example, div #7, out of div 1-8 I need the text to change so that it doesn't look like

number: 1
number: 2
number: 3
number: 4
number: 5
number: 6
number: 8

This code adds the div at the end of the containing div xbox

d1.insertAdjacentHTML('beforeend', '<div class="xbox" id ="xbox1'+numItems+'">Number:  '+countBox()+'</div>

this code counts the amount of boxes already

    function countBox()
{
    var numItems = $('.Cbox').length;
    return numItems;

}

I've thought about just taking the div and setting the inner-html. But I figured I'd see if there is a better way to force the code to update the variable.

Could you make a [jsfiddle](http://www.jsfiddle.net) for us? — imtheman, Mar 11 '14 at 22:14
Why two different classes, you're inserting `xbox` boxes, but counting `Cbox` boxes ? — adeneo, Mar 11 '14 at 22:15

score 1 · Answer 1 · answered Mar 11 '14 at 22:17

1

So basically update the text of all the elements so they are in numbered order again after one is removed.

The numItems variable uses the length, so that's not an issue.

To update the text of the all the boxes you could do

$('.xbox').text(function(i) {
    return 'number: ' + (i+1);
});

answered Mar 11 '14 at 22:17

adeneo

312,895
29
395
388

Couldnt have put it better myself. – Nicholas Hazel Mar 11 '14 at 22:19
So then would I call this somewhere? – PadlockCode Mar 11 '14 at 22:27

score 0 · Answer 2 · answered Mar 11 '14 at 22:18

add text to your divs
add onclick functions and pass what div i.e., onclick="myFunction(0)"
Update the div text

document.getElementById('yourID').innerHTML = "new text!";

full example

HTML

<div id="div 1" onClick('update(0)');>some text</div>
<div id="div 2" onClick('update(1)');>some text</div>
<div id="div 3" onClick('update(2)');>some text</div>

* JavaScript *

function update(column){
    //max number of divs from your example would be 8
    for(var i = column; i < MAX_NUMBER_DIV_HERE; i++){
        document.getElementById('div ' + i).innerHTML = i + "";
    }
}

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

Maybe you could use an ol instead with a custom format? (More info)

Or if there is a small amount of numbers, nth-child with text-before?

#group div:nth-child(1):before { 
  content: "number: 1";
}

#group div:nth-child(2):before { 
  content: "number: 2";
}

Legacy support is not very good in both cases.

edited May 23 '17 at 12:27

Community

1
1

answered Mar 11 '14 at 22:23

sabof

8,062
4
28
52

JavaScript update variable name

3 Answers3