Question

我有2个问题。首先，如何使按钮出现的段落居中。我尝试在css中使用id的“text”和“element”但没有发生任何事情。

另外 - 当我按下按钮时，我想要新的列表和字母来替换旧的列表和字母，但不清除整个事情。感谢

Answer 1

我会添加一个每次清除的“列表目标”div：

将此添加到您希望展示商品的底部的html中。这里的好处是它可以放在文档中的任何位置，因此您可以移动项目的位置。

<div id="listHolder"></div>

然后在你的JS中，使用它代替文档：

function listAndLetter(){
     var alphabet=["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "R", "S", "T", "W" ];
var randomLetter= alphabet[Math.floor( Math.random() * 20)];

var list=[1,2,3,4,5,6];
var randomList=list[Math.floor( Math.random() * 6)];

//Get your main div element here
var parent = document.getElementById("listHolder");
var element = document.createElement('div');
var text = document.createTextNode("Your list is" + " " + randomList+ " "+ "and your letter is" + " " + randomLetter+"!");
element.appendChild(text);
//Clear the list div, and add your new data to it each time.
parent.innerHTML = "";
parent.appendChild(element);
}

然后在CSS中添加text-align：center -

#listHolder{
  text-align:center;
}

轰！像魅力一样。

为了记录，您应该重新考虑将其称为“列表”，因为它不是......列表。它讨论了一个列表，但也许你可以把它称为程序员而不是用户，因为用户不会查看你的源代码。比如说“输出”或“输出 - 父”等等。我把listHolder放在了你的命名法，但更好的是确保未来的程序员，甚至你6周后都可以回到这个代码并且像“是的，这是有道理的”。

Answer 2

检查输出here

只需将输出文本居中对齐，并在每次点击按钮时指定文本。

function listAndLetter(){
     var alphabet=["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "R", "S", "T", "W" ];
var randomLetter= alphabet[Math.floor( Math.random() * 20)];

var list=[1,2,3,4,5,6];
var randomList=list[Math.floor( Math.random() * 6)];

document.getElementById("content").innerHTML="<div>Your list is" + " " + randomList+ " "+ "and your letter is" + " " + randomLetter+"!</div>";
}

Answer 3

在你的JS Bin中，text和element是JavaScript变量 - 而不是CSS选择器。如果要以这种方式引用它，则需要为生成的HTML添加ID。

var element = document.createElement('div');
element.className = "aClassName";

然后使用CSS引用.aClassName

.aClassName{
   text-align:center;
}

如何将我附加js的内容居中并替换它

3 个答案: