将随机 ID 作为参数传递答案

【问题标题】：Pass a random ID as a parameter将随机 ID 作为参数传递
【发布时间】：2023-03-15 11:55:01
【问题描述】：

首先，我是真正的编程新手，如果我的问题有任何改变，我提前道歉。

我有两个函数，第一个是创建一个 div，将其插入另一个 div 并为其分配一个由 Math.random() 方法生成的随机 ID。第二个是通过 ID 获取这个全新的元素并为其设置样式。

但为了让这个函数正常工作，我需要使用“getElementById()”方法获取这个新 ID。我以为我可以通过 interFrame 函数将它作为参数传递，但它被识别为“null”。

我已经进行了研究并尝试了所有我能想到的，但我找不到客观的答案。

你会在这支笔上看到一个按钮，当你点击它时，会显示一个蓝色块，我希望这个块在按钮被点击后自动下降。

https://codepen.io/WegisSilveira/pen/PMPoaR

var field = document.getElementById("field");
var btn = document.getElementById("btn");
var py;
var dy;
var vel;

    function addBlock() {
        dy = 0.4;
        py = 0;
        vel = 0.1;

        var ID = Math.round(Math.random()*100000);
        var div = document.createElement('div');
        div.className = "block";
        div.setAttribute('id', ID);
        field.appendChild(div);
        interFrame(ID);    
    }

    function interFrame(id) {
        var block = document.getElementById(id);
        tmp = requestAnimationFrame(interFrame);
        py += dy + vel;

        block.style.top = py + "px";

        if (py >= 675) {
            cancelAnimationFrame(tmp);
        }
    }

    btn.addEventListener('click', addBlock);

    <body>
            <div id="field">
                <button type="submit" id="btn">TesteAdd</button>
            </div>


        </body>

【问题讨论】：

您能否也发布 HTML 以便他人帮助您。
@Nidhin Joseph 我没有任何元素，只有父 div。我在其中插入新的 div 并使用变量 ID 生成 id。使用 devtools 我可以看到它正在工作。我试图将相同的数字作为参数传递的原因实际上是 getElementById 接收相同的 id。我不知道我是否清楚，对此感到抱歉
什么是空？ id 在帧间或运行 getElementByID 时 block 的值？
在您的代码中 field 未定义。你是在别处定义它吗？你检查过控制台是否有错误？
@alberto montalesi 第二个，当我运行 getElementById 时。 interframe 函数中的 id 正在接收值

标签： javascript html css

【解决方案1】：

首先，您可以传递div 实例而不是搜索ID 本身，因为两者都引用相同的el。现在，在您的requestAnimationFrame 回调中，您需要传递参数，因为interFrame 需要它们才能正常工作。

演示

var btn = document.getElementById("btn");
var field = document.getElementById("field");
var random;
var py;
var dy;
var vel;
var block;
var ID;

function interFrame(div, id) {
  var block = div;
  tmp = requestAnimationFrame(interFrame.bind(this, div, id));
  py += dy + vel;

  block.style.top = py + "px";

  if (py >= 100) {
    cancelAnimationFrame(tmp);
  }
  block.innerHTML = "inner" + id;
}

function addBlock() {
  dy = 0.4;
  py = 0;
  vel = 0.1;

  var ID = Math.round(Math.random() * 100000);
  var div = document.createElement('div');
  div.className = "block";
  div.setAttribute('id', ID);
  field.appendChild(div);
  interFrame(div, ID);
}



btn.addEventListener('click', addBlock);

#field {
  height: 750px;
  width: 600px;
  background-color: #333;
}

.block {
  width: 75px;
  height: 75px;
  margin-left: 262.5px;
  position: absolute;
  /*display: none;*/
  background-color: aqua;
}

<div id="field">
  <button type="submit" id="btn" onclick="addBlock();">Add</button>
</div>

【讨论】：

我刚试过，但在这种情况下，'top' 属性是未定义的
我刚刚看到你要求提供 HTML 代码，但它只是一个 div。
那么我猜你的 field 变量实际上并不代表 DOM 上的某些东西。会不会是文档片段？还有什么？
@Scott Sauyet 它是父 div。只是。我编辑了问题并将html放在那里
@Monstro 看看演示，我已经编辑了我的帖子。您可以在控制台中看到 div 的样式设置为 top:10px。这可能是您这边的一些错字，请仔细检查您的实施。谢谢

【解决方案2】：

这是另一个没有所有全局变量的版本：

function addBlock() {
    var field = document.getElementById("field");
    var ID = Math.round(Math.random()*100000);
    var div = document.createElement('div');
    div.className = "block";
    div.setAttribute('id', ID);
    div.appendChild(document.createTextNode('node: ' + ID))
    field.appendChild(div);
    interFrame(ID);    
}

function interFrame(id) {
    var block = document.getElementById(id);
    var tmp;
    var py = 0;
    var dy = 0.4;
    var vel = 0.1;

    function frame() {
        py += dy + vel;
        block.style.top = py + "px";

        if (py < 675) {
            tmp = requestAnimationFrame(frame)
        }
    
    }
    tmp = requestAnimationFrame(frame);
}

var btn = document.getElementById("btn");
btn.addEventListener('click', addBlock);

#field {
  height: 750px;
  width: 600px;
  background-color: #333;
}

.block {
  width: 75px;
  height: 75px;
  margin-left: 262.5px;
  position: absolute;
  background-color: aqua;
}

<div id="field">
    <button type="submit" id="btn">TesteAdd</button>
</div>

至于你的代码为什么不能工作，requestAnimationFrame 调用了interFrame，但是当它这样做时，它并没有传递你需要的 id。它仅在第一次调用时收到该 ID。这里我使用了一个辅助函数frame，它在范围内已经有block、py、dy和vel，不需要重新初始化它们。

【讨论】：

我明白了。现在看起来很简单。你的解释让事情变得非常清楚。非常感谢！
我刚刚在我的代码上试了一下，这正是我所需要的。你有点回答了我肯定会提出的另外两个问题。 :)