javascript - 多次更改元素的 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>