javascript - 前端网页中要存在两个留言板，发送时，一个发送了，另一个不能发送了，请大神给个解答吧？

Question

<p id="loser">
    <h1>Loser</h1>
    <img  id="loser-img" src="img/winner.png" alt=""/>
    <p class="txt">
        <textarea name="content" class="tt text" cols="23" rows="1" placeholder="想说点什么......"></textarea>
        <p class="list-send">
            <img src="img/tupian.png" alt=""/>
            <a href="#" onClick="out()" >发布</a>
        </p>
    </p>

    <p id="info-show">
        <ul></ul>

    </p>
</p>

<!--==========================winner========================-->

<p id="winner">
    <h1>Winner</h1>
    <img  id="winner-img" src="img/loser.png" alt=""/>
    <p class="txt">
        <textarea name="content" class="tt texter" cols="23" rows="1" placeholder="想说点什么......"></textarea>
        <p class="list-send">
            <img src="img/tupian.png" alt=""/>
            <a href="#" onClick="outer()" >发布</a>
        </p>
    </p>
    <p id="info-shower">
        <ol></ol>

    </p>

</p>

<script type="text/javascript">

// 测试本地解析
//最新留言在上
function out() {
    var oLi = document.createElement("li");
    var oList = document.getElementById("info-show")[0];
    var oUl = document.getElementsByTagName("ul", oList)[0];
    var aLi = document.getElementsByTagName("li", oList);

    var inputText = $('.text').val();
    $('#info-show ul').append(reply(AnalyticEmotion(inputText)));

    var html;
    function reply(content) {
        oLi.innerHTML =
                "<p class='head-face'><img src='img/1.jpg'/></p>" +
                "<p class='reply-cont'>" +
                "<p class='username'>小小红飞机<span class='username-floor'>1[楼]</span></p>" +
                " <xmp class='comment-body'>"+content+"</xmp>  "+    //禁止留代码翻译，有空格回车<xmp>

                "<form action='' class='comment-form'>" +
                "<textarea id='comment-reply1' name='content-reply' cols='10' rows='20' placeholder='想说点什么......'></textarea>" +
                "</form>" +
                "<a href='#' class='comment-send'>回复</a >" +
                "</p>";
        return html;
    }
    aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);
}

function outer() {
    var oLier = document.createElement("li");
    var oLister = document.getElementById("info-shower")[0];
    var oUler = document.getElementsByTagName("ol", oLister)[0];
    var aLier = document.getElementsByTagName("li", oLister);

    var inputText = $('.texter').val();
    $('#info-shower ol').append(reply(AnalyticEmotion(inputText)));

    var html;
    function reply(content) {
        oLier.innerHTML =
                "<p class='head-face'><img src='img/1.jpg'/></p>" +
                "<p class='reply-cont'>" +
                "<p class='username'>小小红飞机<span class='username-floor'>1[楼]</span></p>" +
                " <xmp class='comment-body'>"+content+"</xmp>  "+    //禁止留代码翻译，有空格回车<xmp>

                "<form action='' class='comment-form'>" +
                "<textarea id='comment-reply1' name='content-reply' cols='10' rows='20' placeholder='想说点什么......'></textarea>" +
                "</form>" +
                "<a href='#' class='comment-send'>回复</a >" +
                "</p>";
        return html;
    }
    aLier.length ? oUler.insertBefore(oLier, aLier[0]) : oUler.appendChild(oLier);
}

</script>

运行错误报告

Answer 1

谢邀，我看了一下。应该是你那个aLier这个节点的问题

aLier这个变量，用getElementsByTagName这个方法获取dom，但它只接受一个参数， https://developer.mozilla.org... 你传个参进去没啥用。
然后olier得到了document里面的所有li标签。。

然后insertBefore的第二个参数referenceElement是在这个节点中的已有节点。此时，这个olier已经不是ol这个里面的节点了，然后就报错了。

修正方法是，把前面的申明这一坨搞清楚。

var oLier = document.createElement("li");
var oLister = document.getElementById("info-shower");
var oUler = oLister.getElementsByTagName("ol")[0];
var aLier = oLister.getElementsByTagName("li");

Answer 2

你这html代码里只有一个out函数啊

Answer 3

我看到楼主的info-show里面的内容是js动态生成的？你先打印一下你那个要添加的节点看看，能不能获取到，有可能是节点获取的错误导致的。实话说，楼主这demo有点晕啊，第一个out，是说把文本域的内容复制到下面info-show内？那第二个outer是几个意思？也是干这事的？那你两个加起来又是几个意思？没明白