使用Javascript添加增量Div

本质上，我试图实现的是一个按钮，它添加一个div，每个div ID递增1。（即“rock0”、“rock1”、“rock2”等）

代码应该做的是添加ID为“rock”的div，然后遍历并找到标记为“rock”的每个div，并将其更改为“rock0”、“rock1”、“rock2”等。然而，现在它所做的只是添加ID相同的div，而不更改它们

我对自动递增的工作原理有一个基本的了解，我似乎无法将它与添加一个新的div元素结合起来。我几乎可以肯定的是，有一种比我现在尝试的方式简单得多的方法，但在浏览了互联网之后，我找不到这种方法

我的HTML：

添加岩石

我的Javascript：

var=1；
函数addRock（）{
//第一行添加ID为“rock”的新div
document.getElementById（'inventory'）。innerHTML+=''；
//接下来的几行应该经过，找到任何标有“rock”的ID
//并将每一个值自动递增1。
var list=document.getElementById（'rock'）；
对于（变量i=0；i

非常感谢您的帮助！这也是我关于堆栈溢出的第一个问题，因此如果您需要更多信息或其他信息，请告诉我。

您在这里得到了一个元素：

但在这里尝试将其视为一个数组：

根据代码中的描述和注释，听起来好像有多个元素具有相同的

id

。这是无效的标记，因此该标记上的JavaScript行为将是未定义的

但是这里可能不需要具有相同

id

的元素。每次点击按钮都会添加一块新的岩石，对吗？你有一个全局变量和计数。因此，该函数只需递增并添加新函数，无需循环。大概是这样的：

var rocks = 1;
function addRock() {
    // increment first or afterward, depending on what you want the id in the next line to be
    rocks++;

    // construct the id from the "rocks" variable
    document.getElementById('inventory').innerHTML +=
        '<div class="item" id="rock' + rocks + 
        '" style="position: absolute; left: 10px;top: 10px;"> </div>';

    // the rest of what you're doing
    $('#rocks').html('Rocks: ' + rocks);
    $(drag);
}

var=1；
函数addRock（）{
//根据您希望下一行中的id是什么，先递增或后递增
岩石++；
//从“rocks”变量构造id
document.getElementById（'inventory'）.innerHTML+=
' ';
//你正在做的其他事情
$（'#rocks'）.html（'rocks:'+rocks）；
$（拖动）；
}

---

添加新元素时，请使用正确的

id

添加它。而不是添加具有重复

id

值的新元素，然后在之后尝试更正它们。

谢谢！这似乎已经解决了这个问题，现在我有其他的问题，但在我问更多我认为的问题之前，我会尝试自己解决它们。

var rocks = 1;
function addRock() {
    // This first line adds the new div with an ID of 'rock'
    document.getElementById('inventory').innerHTML += '<div class="item" id="rock" style="position: absolute; left: 10px;top: 10px;"> </div>';
    // These next few lines are supposed to go through and find any ID labeled 'rock'
    // and auto-increment each one by 1.
    var list = document.getElementById('rock');
    for (var i = 0; i < list.length; i++) {
    list[i].setAttribute("id", "rock" + i);
}
    rocks++;
    $('#rocks').html('Rocks: ' + rocks);
    $( drag );
}

var list = document.getElementById('rock');

list[i].setAttribute("id", "rock" + i);

var rocks = 1;
function addRock() {
    // increment first or afterward, depending on what you want the id in the next line to be
    rocks++;

    // construct the id from the "rocks" variable
    document.getElementById('inventory').innerHTML +=
        '<div class="item" id="rock' + rocks + 
        '" style="position: absolute; left: 10px;top: 10px;"> </div>';

    // the rest of what you're doing
    $('#rocks').html('Rocks: ' + rocks);
    $(drag);
}