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

问题描述

问 题

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

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

    </div>
</div>

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

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

    </div>

</div>

<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 =
                "<div class='head-face'><img src='img/1.jpg'/></div>" +
                "<div 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 >" +
                "</div>";
        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 =
                "<div class='head-face'><img src='img/1.jpg'/></div>" +
                "<div 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 >" +
                "</div>";
        return html;
    }
    aLier.length ? oUler.insertBefore(oLier, aLier[0]) : oUler.appendChild(oLier);
}

</script>

运行错误报告

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

谢邀，我看了一下。应该是你那个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");

这篇关于javascript - 前端网页中要存在两个留言板，发送时，一个发送了，另一个不能发送了，请大神给个解答吧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！