Incrementing variable id using javascript button onclick event

Question

im trying to increment the id of an element everytime i click a button

im confused why its working when for innerHTML but not for id

my markup

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

incrementing inner html

<script>
    var a = 1;

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

incrementing element variable id

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

<script>
    var a = 1;

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

How do you know it is not working for id? Also, ids can not start with a number. Try instead id = "ele"+a; — async await
– async await, Commented Nov 20, 2021 at 7:29
you're right. i forgot id cannot start with number. i tried this, document.getElementById("demo").id = "ele"+a; but it still gave me error i.imgur.com/IZh4Ott.png — cha
– cha, Commented Nov 20, 2021 at 7:34
@cha Because you changed the id from 'demo' to a new value and then you are trying to get the element with the id 'demo' which now does not exist. — aerial
– aerial, Commented Nov 20, 2021 at 7:37
The second example will only work once because once you've changed the id you can't then select that same element using the old id (because that id no longer exists). — Andy
– Andy, Commented Nov 20, 2021 at 7:37
aa, thanks for pointing that out. ill try setting the getelementbyid to variable. and see how it goes. this a bit challenging. and maybe set the markup id as variable too. still not sure how to achieve that atm. if anyone got suggestions, im all ears. — cha
– cha, Commented Nov 20, 2021 at 7:41

async await · Accepted Answer · 2021-11-20 07:56:46Z

1

Please enjoy this demo on storing an element into a variable for reuse. It looks like your issue was with trying to select the element by id after the id changed.

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>

edited Nov 20, 2021 at 7:56

answered Nov 20, 2021 at 7:47

async await

2,4251 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

async await Over a year ago

Also you may be using an html id where you should be using a data attribute

cha Over a year ago

hello, thanks for sharing this. everything makes complete sense to me except this part const val = (cntr % 4) + 1; iirc const declaration can only be used once. what is the (cntr % 4) for

async await Over a year ago

Sorry, I edited the post slightly and the comment does not reflect what is there now. const variable can only be assigned once, however it is only assigned once inside it's scope. const is often preferable to use for avoiding bugs when building more complex code, also it is not hoisted like var is. cntr % 4 is the modulus operator which is basically the "remainder" when dividing. That way my number is always 0 - 3 and I cycle through 0 - 3 without having to write more logic.

cha Over a year ago

no worries, this and ur first comment really helps. im looking into data attribute and modulo. they look really powerful

Collectives™ on Stack Overflow

Incrementing variable id using javascript button onclick event

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related