Question

简单的html静态留言板，就只需要静态，需要和第二个留言和第一有一样的功能。

问题是这样的，一个简单的html静态留言板，不能重复添加一个或多个，就是把原来的代码重新复制放进去，然后测试就会出现问题。第二个留言不能用，发送的消息直接到了第一个留言上面了。希望能解决这个问题，第二个留言发送后要和第一个留言一样，放在上面。以下就是重复复制出来的源码。

<style>
* {
font-size:12px;
margin:0;
padding:0;
}
li {
margin-top:4px;
}
</style>

<script type="text/javascript">
function Trim(text)//去左右空格

{
return text.replace(/^\s+|\s+$/g);//替换一个与正则表达式匹配的子串
}

function sendTxt()
{
if (Trim(document.getElementById("txtSendContent").value)=="")
{
alert("内容不能为空，请填写评价");
document.getElementById("txtSendContent").focus();
return false;
}

document.getElementById("ulContent").innerHTML+="<font color='red'>评价</font>:"+getPic(document.getElementById("txtSendContent").value)+"<br></p>";
}

function getPic(text)
{

return text;
}
</script>

<ul id="ulContent" style="text-align:left">
</ul>
<br>
<form action="" method="post" name="form1">
<p>
<textarea name="txtSendContent" id="txtSendContent" cols="20" rows="1"></textarea>
</p>
<p>
<input style="width: 60px; height: 18px;"/ type="button" name="button" id="button" value="评论" onClick="return sendTxt();">
</p>
</form>

<style>
* {
font-size:12px;
margin:0;
padding:0;
}
li {
margin-top:4px;
}
</style>

<script type="text/javascript">
function Trim(text)//去左右空格

{
return text.replace(/^\s+|\s+$/g);//替换一个与正则表达式匹配的子串
}

function sendTxt()
{
if (Trim(document.getElementById("txtSendContent").value)=="")
{
alert("内容不能为空，请填写评价");
document.getElementById("txtSendContent").focus();
return false;
}

document.getElementById("ulContent").innerHTML+="<font color='red'>评价</font>:"+getPic(document.getElementById("txtSendContent").value)+"<br></p>";
}

function getPic(text)
{

return text;
}
</script>

<ul id="ulContent" style="text-align:left">
</ul>
<br>
<form action="" method="post" name="form1">
<p>
<textarea name="txtSendContent" id="txtSendContent" cols="20" rows="1"></textarea>
</p>
<p>
<input style="width: 60px; height: 18px;"/ type="button" name="button" id="button" value="评论" onClick="return sendTxt();">
</p>
</form>

Answer 1

<style>
* {
    font-size:12px;
    margin:0;
    padding:0; 
} 
li {
    margin-top:4px;
}
</style>

<script type="text/javascript">
function Trim(text)//去左右空格
{
    return text.replace(/^\s+|\s+$/g);//替换一个与正则表达式匹配的子串
}

function sendTxt(dom, ele)
{
    if (Trim(document.getElementById(dom).value)=="")
    {
        alert("内容不能为空，请填写评价");
        document.getElementById(dom).focus();
        return false;
    }
    
    var input = getPic(document.getElementById(dom).value);
    var exist = document.getElementById(ele).innerHTML;
    if(exist.match(input) == input){
        alert("不可添加重复的内容");
        return false;
    }
    document.getElementById(ele).innerHTML+="<font color='red'>评价</font>:"+input+"<br></p>";
}

function getPic(text)
{    

    return text;
}
</script>

<ul id="ulContent_1" style="text-align:left"></ul> 
<br>
<form action="" method="post" name="form1">
  <p>
    <textarea name="txtSendContent_1" id="txtSendContent_1" cols="20" rows="1"></textarea>
  </p>
  <p>
   <input style="width: 60px; height: 18px;"/ type="button" name="button" id="button" value="评论" onClick="return sendTxt('txtSendContent_1', 'ulContent_1');"> 
  </p>
</form>
<ul id="ulContent_2" style="text-align:left"></ul>
<br>
<form action="" method="post" name="form1">
  <p>
    <textarea name="txtSendContent_2" id="txtSendContent_2" cols="20" rows="1"></textarea>
  </p>
  <p>
   <input style="width: 60px; height: 18px;"/ type="button" name="button" id="button" value="评论" onClick="return sendTxt('txtSendContent_2', 'ulContent_2');"> 
  </p>
</form>

追问

你这个 只能 用当前代码，只有两个留言板，如果我要复制无限个，要怎么办？