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>

多次更改元素的ID

2 个答案: