Question

soooo我有这个功能可以在图像上打印5个随机文本中的一个（在我的例子中，是一个记事本，就像在上面写一样。）

function getatext()
{
   var whichtext=get_random();

    var text=new Array(5)
     text[0]="text0";
     text[1]="text1";
     text[2]="text2";   
     text[3]="text3";
     text[4]="text4";

     document.getElementById("notepad").innerHTML +=
             '<p class="notepad">'+(text[whichtext])+'</p>';

事实上，每次我打印文字时，它都会打印在另一个上面，而不是像新条目一样，并将其他内容推到列表中。

我尝试了<li>标签，但大多数示例和内容我都会在简单的html页面中使用它们，而不是javascript文本写入看起来有点困难（至少对我而言）。

使用''+'<li>'+(text[whichtext])+'</li>'+'';让我看到列表，虽然它没有打印在图像上，但是关闭了。我想这样就完全忽略了标签？

我甚至尝试在我的.css中创建一个ul.notepad，以防它重要。我做错了什么？

编辑包含在.css .notepad，p.notepad和<content>中，其中包含所有这些内容：

#content {
    border-left:1px solid #000;
    border-right:1px solid #000;
    background:#ffffff;
    margin-left: 24.9%;
    width:75%;
    min-height:0;
    position:relative;  

.notepad {
        position: relative;
        background-repeat:no-repeat;  
        background-attachment:fixed; 
        width: 300px;
}

p.notepad {
    font-family:"Lucida Handwriting";
    position: absolute;
    top: 90px; 
    left: 65px;   
}

编辑2：在检查了问题之后，我发现我的p.notepad中的position: absolute;可能导致了这一切。第一次打印随机文本，然后当打印第二个文本的时间到来时，它从p.notepad获取相同的坐标，这就是它在第一个文本的顶部打印的原因。但是位置：绝对是重要的，否则文本不会打印在我的记事本图像上。

Answer 1

这可能是CSS问题，而不是HTML问题。 HTML的格式可能会重叠。没有看到CSS就很难。

这是一个基本上你正在做的事情的例子，但是工作：

http://jsbin.com/abemiv

使用： http://jsbin.com/abemiv/edit

编辑来源

Answer 2

我的第一个猜测是你在记事本课上有绝对的定位。

试试这个CSS：

.notepad {
    position:relative;
}

Answer 3

不需要ul / li方法， 就足够了。我同意可能的罪魁祸首是css - 你能发布你的CSS吗？

Javascript文本 - 无法列出

3 个答案: