javascript - 按钮卡在页面顶部

Question

我正在为一个学校元素制作刽子手游戏。 Hangman 显然在页面上有 26 个按钮，(理想情况下)顶部有连字符。我们还需要使用一个 for 循环而不是 26 个按钮标签来制作所有 26 个按钮。我的问题是将按钮移动到页面中间(按钮默认位于顶部)，因为我尝试过的所有方法都不起作用。我需要帮助才能将我的按钮移动到页面底部。

我试过给我所有的按钮一个类并做 [position:absolute;, bottom: 0;]。这种方法的问题是按钮 [s] 被移到底部，但只有 z 按钮可见。我相信，因为我使用了 for 循环，所以每个按钮都被下一个按钮覆盖，同时在 z 处停止。

/* my button creating function */
document.getElementById("letters")
for (var i = 0; i < 26; i++) {
   var button = document.createElement("BUTTON");
   var letterString = String.fromCharCode(97 + i);
   button.id = letterString;
   button.classList.add("letterButton")
   var tee = document.createTextNode(letterString);
   button.appendChild(tee);
   button.addEventListener("click", buttonHandler);
   document.body.appendChild(button);
}

/* my css that supposedly should move the buttons */
.letterButton { 
    position: absolute;
    bottom: 0;
}

期望所有按钮都移动到页面底部并可见。实际结果是只有一个按钮 [z] 被移动到页面底部并且可见。

Answer 1

您可以将各个按钮附加到容器中 <div>而不是DOM并最终移动<div>到底部。

var container = document.createElement("div");
container.id = "container";
container.classList.add("container")
document.body.appendChild(container);

function buttonHandler()
{
}

for (var i = 0; i < 26; i++) {
  var button = document.createElement("BUTTON");
  var letterString = String.fromCharCode(97 + i);
  button.id = letterString;
  var tee = document.createTextNode(letterString);
  button.appendChild(tee);
  button.addEventListener("click", buttonHandler);
  container.appendChild(button);
}

.container {
  position: absolute;
  bottom: 0;
}