Question

我正在为一个学校项目创建一个子手游戏。 man子手显然在页面上有26个按钮，（最好是）连字符在最上面。我们还需要使用一个for循环而不是26个按钮标签来制作所有26个按钮。我的问题是将按钮移动到页面的中间（默认情况下，按钮位于顶部），因为我尝试过的所有方法均无效。我需要将按钮移到页面底部的帮助。

我尝试给所有按钮一个类，然后做[position：absolute;，bottom：0;]。此方法的问题是将按钮移至底部，但仅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;
}

按钮卡在页面顶部

1 个答案: