多次更改元素的ID

Question

我正在尝试更改ID（从html文件）几次。 它是第一次工作，但随后不再工作。 我认为可能是因为onclick对第二个ID更改无效。

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

您遇到的主要问题是，您的许多偶数处理程序都未附加任何内容，因为它们要附加到其id的元素尚不存在。

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();
};

让我们一起来解决问题。 我希望这能使您摆脱困境。 请注意，我更改了您的随机函数，以使其在沙箱中更合适。

 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

请注意，事件处理程序属于元素，而不属于其id属性。 我希望下面的代码片段足以说明这一点。

 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> 

如果将/添加到元素的事件addEventListener /，则情况变得特别混乱。

 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>