Changing id of an element more than one time

Question

I am trying to change an id (from the html file) a few times. It works the first time, but then doesn't work again. I think it might be because the onclick doesn't work for the second id change.

function numberRandomizer(){
  var x = Math.floor((Math.random() * 250) + 50); //random number between 50 and 300
  return x;
}

document.getElementById('startjs').onclick = function () {
  document.getElementById('startjs').id = 'disabledjs';
  document.getElementById('readyspawn').id = 'spawn';
  document.getElementById('spawn').style.top = numberRandomizer() + 'px';
  document.getElementById('spawn').style.left = numberRandomizer() + 'px';
};

document.getElementById('bump1').onclick = function () {
  document.getElementById('spawn').style.top = numberRandomizer() + 'px';
  document.getElementById('spawn').style.left = numberRandomizer() + 'px';
  f_bump2();
};

function f_bump2() {
  alert("bump1 to bump2");
  document.getElementById('bump1').id = 'bump2';
}

document.getElementById('bump2').onclick = function () {
  document.getElementById('spawn').style.top = numberRandomizer() + 'px';
  document.getElementById('spawn').style.left = numberRandomizer() + 'px';
  f_bump3();
};

function f_bump3() {
  alert("bump2 to bump3");
  document.getElementById('bump2').id = 'bump3';
}

document.getElementById('bump3').onclick = function () {
  document.getElementById('spawn').style.top = numberRandomizer() + 'px';
  document.getElementById('spawn').style.left = numberRandomizer() + 'px';
  f_bump4();
};

function f_bump4() {
  alert("bump3 to bump4");
  document.getElementById('bump3').id = 'bump4';
}

Answer 1

The main issue you are having is that many of your even handlers are not attached to anything as the element with the id they are looking to attach to does not yet exist.

document.getElementById('startjs').onclick = function () {
  // --------------------------
  // Note: This element now has this even handler associated with it reguardless
  // of what the id may be now or in the future.
  // --------------------------

  // --------------------------
  // On the "first" click re-find this element and set its id to something new.
  // I'm not sure why you are looking to do this.  It might be better to update the
  // element with an additional class or a data attribute.
  // For example data-clicked="true".
  // You might also not want to re-find this element as you could also just do
  // this.id = 'disabledjs';
  // --------------------------
  document.getElementById('startjs').id = 'disabledjs';
  // --------------------------

  // --------------------------
  // Find the "readyspawn" and alter it.
  // elSpawn is the element in question, no need to re-find it after updating the id.
  // Again though, it might be better to leave the id alone and flag the element with a
  // data-spawnStatus="spawned"
  // --------------------------
  var elSpawn = document.getElementById('readyspawn');
  elSpawn.id = "spawn";
  elSpawn.style.top = numberRandomizer() + 'px';
  elSpawn.style.left = numberRandomizer() + 'px';
  // --------------------------
};

document.getElementById('bump1').onclick = function () {
  // --------------------------
  // Note: This element now has this even handler associated with it reguardless
  // of what the id may be now or in the future.
  // --------------------------

  var elSpawn = document.getElementById('spawn');
  elSpawn.style.top = numberRandomizer() + 'px';
  elSpawn.style.left = numberRandomizer() + 'px';

  f_bump2();
};

document.getElementById('bump2').onclick = function () {
  // --------------------------
  // Problem here.
  // At this point, there is no "bump2" element.  That element is still has an id
  // of bump1 until after it's click handler is executed.  So, this code does
  // effectively nothing at the moment.
  // --------------------------

  var elSpawn = document.getElementById('spawn');
  elSpawn.style.top = numberRandomizer() + 'px';
  elSpawn.style.left = numberRandomizer() + 'px';

  f_bump3();
};

document.getElementById('bump3').onclick = function () {
  // --------------------------
  // Problem here.
  // At this point, there is no "bump3" element.  See above.
  // --------------------------

  var elSpawn = document.getElementById('spawn');
  elSpawn.style.top = numberRandomizer() + 'px';
  elSpawn.style.left = numberRandomizer() + 'px';

  f_bump4();
};

Let's take a whack at fixing things. I hope this gets you unstuck. Note I changed your random function to make things fit a little better in the sandbox.

 function numberRandomizer(){ var x = Math.floor((Math.random() * 50) + 50); //random number between 50 and 100 return x; } document.getElementById('startjs').onclick = function () { if (this.dataset.status === "inactive") { console.log("We apparently already did this..."); return; } this.dataset.status = "inactive"; var spawnEl = document.getElementById('spawn'); spawnEl.dataset.status = "active"; spawnEl.dataset.stage = 0; spawnEl.style.top = numberRandomizer() + 'px'; spawnEl.style.left = numberRandomizer() + 'px'; spawnEl.innerText = spawnEl.dataset.stage; }; document.getElementById('spawn').onclick = function () { if(this.dataset.status != "active") { console.log("We apparently have not started yet..."); return; } if( parseInt(this.dataset.stage) >= 3 ) { console.log("We apparently have done this enough..."); return; } this.dataset.stage = parseInt(this.dataset.stage) + 1; this.style.top = numberRandomizer() + 'px'; this.style.left = numberRandomizer() + 'px'; this.innerText = this.dataset.stage; }; 

 #startjs, #spawn { margin: 1em; height: 3em; width: 3em; border: solid 1px; text-align: center; line-height: 3em; } #spawn { position: absolute; background-color: aliceblue; left: 100px; top: 100px; } 

 <div id="startjs" data-status="active">start</div> <div id="spawn" data-status="inactive"></div> 

Answer 2

Note that event handler belongs to element not to its id attribute. I hope the snippet below illustrate this clearly enough.

 var count = 0; document.getElementById('initId').onclick = function(){ console.log(this.id); this.id='rand'+parseInt(Math.random()*100)+1; this.innerHTML = 'Click me again (' + (count++)+')'; } 

 <button id="initId">Click me</button> 

The situation becomes especially messy if / when you addEventListener to the element.

 var cnt=0; document.getElementById('btn').addEventListener('click', function(){ console.log('my id: ',this.id); this.id='btn'+parseInt(Math.random()*100); this.innerHTML = 'Mess me again (' + (++cnt) +')'; document.getElementById(this.id).addEventListener('click', function(){ console.log('my new id: ',this.id); this.id='btn'+parseInt(Math.random()*100); this.innerHTML = 'Mess me again (' + (++cnt) +')'; }); }); 

 <button id="btn">Mess me</button>