向HTML的script标签注入JS时仅首个div变色的问题求助

核心问题 #

只有第一个div变色的问题，根源有两个：

1. 元素获取方式错误：你在注入的chcolor函数里直接用div${count}操作元素，但这些变量从未声明，浏览器无法识别，仅第一个可能因巧合（比如页面存在同名全局变量）生效，其他都会报错。
2. 脚本注入的转义错误：拼接脚本内容时用了\\转义换行，导致生成的代码出现多余反斜杠，破坏函数语法，后续chcolor函数无法正常执行。

修改后的代码 #

保留你的整体逻辑，仅修正关键问题：

var positionX = 0;
var positionY = 0;
var velocityY = 50;
var velocityX = 50;
var ball = document.getElementById("ball");
var reverseX = false;
var reverseY = false;
var Xmin = 0;
var Ymin = 0;
var Xmax = 800;
var Ymax = 300;
var BallsCount = 5;

var newElement = document.createElement("script");
var scriptTag = document.body.appendChild(newElement);

var newElement2 = document.createElement("style");
var styleTag = document.body.appendChild(newElement2);

scriptTag.id = "scr";
styleTag.id = "stl";

var t = document.getElementById("scr");
var s = document.getElementById("stl");

var count = 0;
do {
  var newElement3 = document.createElement("div");
  var divTag = document.body.appendChild(newElement3);
  divTag.id = "div" + count;

  // 样式部分保留原逻辑
  s.innerHTML +=
    "#div" +
    count +
    " {z-index: " +
    count +
    "; position: absolute; left: 0px; top: 200px; width: 50px; height: 50px; border-radius: 50%; background:black;}\n";

  // 脚本部分修正：去掉多余转义，用getElementById获取元素
  t.textContent += `
    function randomNumber${count}(min, max) {
      return Math.random() * (max - min) + min;
    }
    function chcolor${count}() {
      var r = randomNumber${count}(0, 255);
      var g = randomNumber${count}(0, 255);
      var b = randomNumber${count}(0, 255);
      var targetDiv = document.getElementById('div${count}');
      targetDiv.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    }
    setInterval(chcolor${count}, 900);
  `;

  count++;
} while (BallsCount >= count);

// 以下原有函数保留
function chsize() {
  var blsz = randomNumber(30, 700);
  ball.style.width = blsz + "px";
  ball.style.height = blsz + "px";
}

function chborder() {
  ball.style.borderRadius = randomNumber(30, 50) + "%";
}

function moveBall() {
  if (reverseX === false) {
    positionX = positionX + velocityX;
    ball.style.left = positionX + "px";
  } else {
    positionX = positionX - velocityX;
    ball.style.left = positionX + "px";
  }

  if (reverseY === false) {
    positionY = positionY + velocityY;
    ball.style.top = positionY + "px";
  } else {
    positionY = positionY - velocityY;
    ball.style.top = positionY + "px";
  }

  if (positionY > Ymax || positionY === Ymin) {
    reverseY = !reverseY;
  }

  if (positionX > Xmax || positionX === Xmin) {
    reverseX = !reverseX;
  }
}

关键修改点 #

• 移除脚本拼接时的\\转义，用模板字符串保证代码语法正确。
• 在chcolor函数中，用document.getElementById('div${count}')明确获取对应ID的元素，避免使用未声明的变量。

修改后所有生成的div都会定期切换颜色。另外可以进一步优化：把randomNumber函数提取出来复用，不用每个球都定义重复函数，减少代码冗余。

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