estoy tratando de incrementar la identificación de un elemento cada vez que hago clic en un botón
estoy confundido por qué funciona cuando para innerHTML pero no para id
mi marcado
<p id="demo"></p> <button onclick="myfunction()">press me</button>incrementando html interno
<script> var a = 1; function myfunction(){ document.getElementById("demo").innerHTML = a; a++; } </script>ID de variable de elemento incremental
<button onclick="myfunction()">press me</button> <script> var a = 1; function myfunction(){ document.getElementById("demo").id = a; a++; } </script>Disfrute de esta demostración sobre el almacenamiento de un elemento en una variable para su reutilización. Parece que su problema fue tratar de seleccionar el elemento por id después de que cambió la 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>