0

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>
cha
  • 13
  • 2
  • 4
    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 Nov 20 '21 at 07: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 https://i.imgur.com/IZh4Ott.png – cha Nov 20 '21 at 07:34
  • 2
    @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 Nov 20 '21 at 07:37
  • 1
    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 Nov 20 '21 at 07:37
  • 1
    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 Nov 20 '21 at 07:41

1 Answers1

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>
async await
  • 1,967
  • 1
  • 8
  • 19
  • Also you may be using an html id where you should be using a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) – async await Nov 20 '21 at 07:53
  • 1
    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 – cha Nov 20 '21 at 07:58
  • 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](https://stackoverflow.com/a/8900665/7978627) 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. – async await Nov 20 '21 at 08:02
  • 1
    no worries, this and ur first comment really helps. im looking into data attribute and modulo. they look really powerful – cha Nov 20 '21 at 08:06