使用javascript按钮onclick事件递增变量id

Question

我试图在每次单击按钮时增加元素的 id

我很困惑为什么它在用于 innerHTML 而不是 id 时起作用

我的标记

<p id="demo"></p>
<button onclick="myfunction()">press me</button>

递增内部 html

<script>
    var a = 1;

    function myfunction(){
        document.getElementById("demo").innerHTML = a;
         a++;
        
    }
</script>

递增元素变量 id

<button onclick="myfunction()">press me</button>

<script>
    var a = 1;

    function myfunction(){
        document.getElementById("demo").id = a;
         a++;
    }
</script>

Answer 1

请欣赏这个关于将元素存储到变量中以供重用的演示。看起来您的问题是在 id 更改后尝试按 id 选择元素。

let cntr = 1;

const demo = document.getElementById("demo");

document.querySelector("button")
.addEventListener("click", function () {
  const val = cntr % 4;
  demo.id = "ele" + val;
  cntr++;
});

.demo {
  height: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: black;
  margin: auto;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  transition: background 1s;
}

#ele1 {
  background: pink;
}

#ele2 {
  background: lightblue;
}

#ele3 {
  background: lightgreen;
}

<div id="demo" class="demo"><button>Clicky!</button></div>