onclick事件无法重复触发，点击目标仅随机移动一次问题求助

问题根源分析 #

你的代码里有三个核心问题导致点击后元素只移动一次：

• 随机坐标x、y在函数外部只生成一次，每次点击都用同一个固定值，所以元素看起来没移动（实际位置没变）。
• 后面的for循环重复定义target函数属于完全冗余的代码，不仅没用还覆盖了之前的函数定义。
• img标签默认是inline布局，left和top样式不会生效，必须设置定位属性才能让坐标生效。

修复后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <style>
    #tg {
      position: absolute; /* 必须添加定位，left/top才会生效 */
    }
  </style>
</head>

<body>
  <img src="target.png" id="tg" onclick="target()">

  <script>
  var a = document.getElementById("tg");

  function target(){
    // 每次点击时重新生成随机坐标
    var x = Math.random() * (window.innerWidth - a.offsetWidth);
    var y = Math.random() * (window.innerHeight - a.offsetHeight);
    a.style.left = x + "px";
    a.style.top = y + "px";
  }
  </script>
</body>

</html>

关键修改说明 #

• 将x、y的随机生成逻辑移到target函数内部，每次点击都会重新计算新的随机坐标。
• 添加了position: absolute样式给目标元素，确保left和top属性能控制元素位置。
• 优化了随机坐标的计算：减去元素自身的宽高，避免元素移出可视区域外。
• 删除了冗余的for循环和重复的函数定义，简化代码逻辑。

内容的提问来源于stack exchange，提问作者james