javascript - 如何定位具有相同功能的三个ID？

我正在尝试将相同的功能应用于三个不同的ID。我创建了一个小提琴来说明这一点：https://jsfiddle.net/jnoweb/xrpsshcp/

var game = {score:0},
scoreDisplay = document.getElementById("score1");

function add20() {
  TweenLite.to(game, 1, {
      score:"+=20",
      roundProps:"score",
      onUpdate:updateHandler,
      ease:Linear.easeNone
  });
}

function updateHandler() {
  scoreDisplay.innerHTML = game.score;
}

add20();

因此，我尝试以与红色数字相同的方式为黑色数字设置动画。有任何想法吗？

谢谢！

最佳答案

第1步：制作一个元素的Array，像处理第一个元素一样将其存储在scoreDisplay中。

scoreDisplay = [
  document.getElementById("score1"),
  document.getElementById("score2"),
  document.getElementById("score3")
];

步骤2：使用Array.prototype.forEach对每个元素执行更新功能：

function updateHandler() {
   scoreDisplay.forEach(function(display) {
     display.innerHTML = game.score;
   });
}

在您的小提琴中：https://jsfiddle.net/ku72qy7e/

关于javascript - 如何定位具有相同功能的三个ID？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40655525/