有没有更好的方法在一个html页面上多次运行JavaScript？

剧本是：

<code>
  <script>
  // set up the base pattern
  var pattern = Trianglify({
    height:210,
    width: 360,
x_colors:'random',
    cell_size: 20 })
  // svg
  document.getElementById("img").appendChild(pattern.svg())
// select the div (or someting) to generate a svg image.
  </script>
</code>

  
//设置基本模式
变量模式=三角形({
身高：210，
宽度：360，
x_颜色：'随机'，
单元格（大小：20}）
//svg
document.getElementById（“img”）.appendChild（pattern.svg（））
//选择div（或someting）以生成svg图像。
  

一个名为“Triangalify”（）的插件

问题是，我有几个div要选择和填充，但是当这个脚本运行时，它只为所有div生成一个随机代码，所以所有div的结果都是相同的

我想到的正常而愚蠢的方法是把这个脚本复制到每一个需要结果的地方，但它似乎不酷也不干净

在这种情况下，有没有更好的方法来获取几种不同的随机模式

就像遇到一个小脚本->加载要生成的主脚本->下一个小脚本。。。。如何在js中实现这一点

---

感谢您的建议。

构建一个包含可配置项的函数，然后在需要时运行该函数。这将节省代码重复

function RunTriangle(height, width, colors, cellSize, element) {
      var pattern = Trianglify({
          height:height,
          width: width,
          x_colors:colors,
          cell_size: cellSize
      })

      document.getElementById(element).appendChild(pattern.svg())
}

然后这样称呼它（我在这里使用原始数据）：

RunTriangle（210,360，'random'，20，'img'）

如果要多次运行此方法，请将所有项作为
对象创建一个
字典
，然后迭代，使用对象属性调用此方法

const triangles = {
    first: {
        height: 100,
        width: 20,
        colors: 'random',
        cellSize: 10,
        element: 'anotherElement'
    },
    // repeat this however many times you want
};

然后你可以像这样使用它：

const configurableTriangles = Object.keys(triangles);

for(let key in configurableTriangles) {
    const current = triangles[key];
    RunTriangle(current.height, current.width, current.colors, current.cellSize, current.element
}

这将从您的对象中获取每个已配置的
三角形
，然后针对您正在执行的任何操作运行它。
构建一个函数，该函数接收可配置项，然后在需要时运行该函数。这将节省代码重复

function RunTriangle(height, width, colors, cellSize, element) {
      var pattern = Trianglify({
          height:height,
          width: width,
          x_colors:colors,
          cell_size: cellSize
      })

      document.getElementById(element).appendChild(pattern.svg())
}

然后这样称呼它（我在这里使用原始数据）：

RunTriangle（210,360，'random'，20，'img'）

如果要多次运行此方法，请将所有项作为
对象创建一个
字典
，然后迭代，使用对象属性调用此方法

const triangles = {
    first: {
        height: 100,
        width: 20,
        colors: 'random',
        cellSize: 10,
        element: 'anotherElement'
    },
    // repeat this however many times you want
};

然后你可以像这样使用它：

const configurableTriangles = Object.keys(triangles);

for(let key in configurableTriangles) {
    const current = triangles[key];
    RunTriangle(current.height, current.width, current.colors, current.cellSize, current.element
}

这将从您的对象中获取每个已配置的
三角形
，然后针对您正在执行的任何操作运行它。
您可以选择要填充的所有元素，并使用循环生成新的svg并附加到每个元素

js tri-fill
是每个div的类名

 var divsList = document.querySelectorAll('.js-tri-fill');
 divsList.forEach(function(ele, index) {
    var pattern = Trianglify({
        height:210,
        width: 360,
        x_colors:'random',
        cell_size: 20 });
    ele.appendChild(pattern.svg())
}) 

您可以选择要填充的所有元素，并使用循环生成新的svg并附加到每个元素

js tri-fill
是每个div的类名

 var divsList = document.querySelectorAll('.js-tri-fill');
 divsList.forEach(function(ele, index) {
    var pattern = Trianglify({
        height:210,
        width: 360,
        x_colors:'random',
        cell_size: 20 });
    ele.appendChild(pattern.svg())
}) 

最明显的是将此代码放入循环中。让它在所有要填充的div中循环-也就是说，您将从DOM中选择它们，循环它们，并为每个div运行此代码来填充该div。您可能对所有div使用相同的
id
“img”，这会导致脚本附加到所有div。此外，在HTML中不建议对多个元素使用相同的
id
。您应该改为使用事件侦听器，并将svg附加到单击的img元素中。让它在所有要填充的div中循环-也就是说，您将从DOM中选择它们，循环它们，并为每个div运行此代码来填充该div。您可能对所有div使用相同的
id
“img”，这会导致脚本附加到所有div。此外，在HTML中不建议对多个元素使用相同的
id
。您应该改为使用事件侦听器，并将svg附加到单击的img元素。这不是问题：）还应确保使用问题底部更新的
for loop
。我最初输入了错误的代码，几分钟后将其更新为正确的版本：）没问题：）还要确保使用问题底部更新的
for循环
。我最初输入了错误的代码，几分钟后将其更新为正确的版本：）谢谢你DarknessZX，我已经尝试了你的代码，它工作得非常好！非常感谢。谢谢你DarknessZX，我已经尝试了你的代码，它工作得非常好！非常感谢你。