如何通过点击联系人打开聊天标签?

时间:2017-11-19 14:13:17

标签: javascript html parameters onclick chat

如果你能帮我解决这个问题,我很乐意。我正在尝试创建联系人列表,如下所示,然后可以打开该联系人的聊天选项卡。不知何故,似乎JS不起作用,如果你能帮助我,我会很感激。

第1篇(HTML联系人)

<div id="contact-list">
                <div class="contact-line">
                    <div class="status"><div class="online"></div></div>
                    <div class="user-photo"></div>
                    <div class="unread-wrap"><div class="unread">2</div></div>
                    <div class="contact-name">111111111</div>
                    <button onclick="createConversation(0)">Open Chat Tab</button>
                </div>

                ...

</div>

<ul id="ConversationsHeaderList">
</ul>

<script type="text/javascript" src="---.js"></script>

第二件(JS)

var friendsList = document.getElementById("contact-list").getElementsByClass("contact-line").innerHTML;
var conversations = [];

function createConversation(contactindex) {

var auxvar = '<button><div class="ConversationHeader">' + friendsList[contactindex].getElementsByClass("contact-name").innerHTML + '</div></button>' + '<div class="status">' + friendsList[contactindex].getElementsByClass("status").innerHTML +'</div>' + '<div class="unread-wrap">' + friendsList[contactindex].getElementsByClass("unread-wrap").innerHTML + '</div>';

conversations.push('<li>' + auxvar + '<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>' + '</li>');

document.getElementById("ConversationsHeaderList").innerHTML = conversations;

}

不知何故,我无法创造出类似这样的东西:

<ul id="ConversationsHeaderList">
    <li class="ConversationsHeader">
                        <button><div class="ConversationHeader">111111111</div></button>
                        <div class="status"><div class="online"></div></div>
                        <div class="unread-wrap"><div class="unread">2</div></div>
                        <div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>
    </li>
</ul>

0 个答案:

没有答案