Question

我想为函数'chatSubmit'中的每个段落元素添加唯一ID，如下面的代码所示。 DOM是动态生成的，而段落有一个ID textDisplay，对于新添加的DOM元素，它必须是不同的。

这是小提琴中的演示：https://jsfiddle.net/phaneendra/89v4a7m3/

<div class="userlist">
    <ul>
        <li onclick="openChat(this)">user1</li>
                    <li onclick="openChat(this)">user2</li> 
                    <li onclick="openChat(this)">user3</li>
                    <li onclick="openChat(this)">user4</li>
                    <li onclick="openChat(this)">user5</li>
    </ul>
</div>

<div id="main"></div>


function chatSubmit(form){ 
var sendInput = form.input;
if(sendInput.value != ""){
var message = sendInput.value;
var username = document.getElementById("username").innerHTML;
document.getElementById("textDisplay").innerHTML += username + ": " +message + "<br/>";
sendInput.value = "";
}else{
return false;
}
}

function openChat(userName){
    var user = document.createElement("div");
    user.className = "chat-app";
    user.innerHTML = '<form name="form"><div class="chat-icons"><div  class="username"><span id="username">'+userName.innerHTML+'</span></div> <div class="settings"></div></div><div class="chat-window"><p  id="textDisplay"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form)"/></div></form>';
    document.getElementById("main").appendChild(user);
 }

Answer 1

我已更新您的代码。请检查更新的代码：

JS：

<script type="text/javascript">
    function chatSubmit(form, userId) {

       var Pid = "textDisplay"+userId;
        var sendInput = form.input;
        if (sendInput.value != "") {
            var message = sendInput.value;
            var username = document.getElementsByClassName(Pid)[0].innerHTML;
            document.getElementById(Pid).innerHTML += username + ": " + message + "<br/>";
            sendInput.value = "";
        } else {
            return false;
        }
    }

    function openChat(userName, userId) {

          var Pid = "textDisplay"+userId;
        var user = document.createElement("div");
        user.className = "chat-app";
        user.innerHTML = '<form name="form"><div class="chat-icons"><div class="username"><span class='+Pid+'>' + userName
        + '</span></div><div class="settings"></div></div><div class="chat-window"><p id="'+Pid+'"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form,'+userId+
            ')"/></div></form>';
        document.getElementById("main").appendChild(user);
    }
    </script>

HTML：

<ul>
            <li onclick="openChat('user1',1)">user1</li>
            <li onclick="openChat('user2',2)">user2</li>
            <li onclick="openChat('user3',3)">user3</li>
            <li onclick="openChat('user4',4)">user4</li>
            <li onclick="openChat('user5',5)">user5</li>
        </ul>

你可以通过在一个数组中存储用户名和id来生成这个html并循环它。

请参阅here

Answer 2

尝试，每条消息都将包含具有唯一ID的标记

//GENERATE RANDOME UNIQUE ID
function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

    function chatSubmit(form){
    var sendInput = form.input;

    if(sendInput.value != ""){
        var message = sendInput.value;
        var username = document.getElementById("username").innerHTML;
var uniqueid=guid();
      document.getElementById("textDisplay").innerHTML += "<span id="+uniqueid+">"+ username + ": " +message + "</span><br/>";
        sendInput.value = "";
    }else{
    return false;
    }
    }

    function openChat(userName){
            var user = '<div class="chat-app"><form name="form"><div class="chat-icons"><div class="username"><span id="username">'+userName.innerHTML+'</span></div><div class="settings"></div></div><div class="chat-window"><p id="textDisplay"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form)"/></div></form></div>';
              document.getElementById("main").innerHTML+=user;
    }

https://jsfiddle.net/BDhara/89v4a7m3/12/ 这是你想要的吗？告诉我你是否还需要别的东西..

Answer 3

使用以下代码生成随机ID。

function getRandomNumber()
{
    return Math.random().toString(36).slice(2);
}
function openChat(userName)
{
    var user = document.createElement("div");
    user.className = "chat-app";
    user.innerHTML = '<form name="form"><div class="chat-icons"><div  class="username"><span id="username">' + userName.innerHTML + '</span></div> <div class="settings"></div></div><div class="chat-window"><p  id="' + getRandomNumber() + '"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form)"/></div></form>';
    document.getElementById("main").appendChild(user);
}

Answer 4

这里你是一个例子

＆＃13;

//utils
function randomUUID() { 
	var s = [], itoh = '0123456789ABCDEF';
	for (var i = 0; i <36; i++) s[i] = Math.floor(Math.random()*0x10);
	s[14] = 4;
	s[19] = (s[19] & 0x3) | 0x8;
	for (var i = 0; i <36; i++) s[i] = itoh[s[i]];
	s[8] = s[13] = s[18] = s[23] = '_';
	return s.join(''); 
}

function chatSubmit(form){
var sendInput = form.input;
if(sendInput.value != ""){
	var message = sendInput.value;
	var username = document.getElementById("username").innerHTML;
	document.getElementById("textDisplay").innerHTML += "<span id= "+randomUUID()+">" + username + ": " +message + "</span><br/>";
	sendInput.value = "";
}else{
return false;
}
}

function openChat(userName){
        var user = document.createElement("div");
        user.className = "chat-app";
        user.innerHTML = '<form name="form"><div class="chat-icons"><div class="username"><span id="username">'+userName.innerHTML+'</span></div><div class="settings"></div></div><div class="chat-window"><p id="textDisplay"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form)"/></div></form>';
        document.getElementById("main").appendChild(user);
}

＆＃13;

*{
	margin:0;
	padding: 0;
}

ul,li{
	list-style-type: none;
}

body{
	font-family: arial;
}

#main{
	position: absolute;
	right: 25%;
	bottom: 0;
}


.chat-app{
	width: 250px;
	border: 1px solid #ccc;
	margin:25px;
	overflow: hidden;
	float:right;
}

.chat-icons{

height: 60px;
}

.chat-icons .username{
	background: #000;
	height: 30px;
	color: #fff;
	display: block;
	line-height: 30px;
	padding-left: 10px;
}

.chat-icons .settings{
	background: #ddd;
	height: 30px;
	color: #fff;
	display: block;
	line-height: 30px;
	padding-left: 10px;
}

.chat-window{
height: 220px;
font-size: 14px;
overflow-y:scroll;
}

.chat-window p{
	font-size: 14px;
	line-height: 25px;
	padding: 10px;
}

.chat-inputs{
	
}

.chat-icons ul{
	float: right;
}

.chat-icons li{
	
float: left;
	
list-style: none;
	
margin: 0 10px;
}


.userlist{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	border-left: 1px solid #ddd;
	width: 200px;
}

.userlist li{
line-height: 35px;padding: 10px;border-bottom: 1px solid #ddd;}

＆＃13;

<div class="userlist">
		<ul>
			<li onclick="openChat(this)">user1</li>
                        <li onclick="openChat(this)">user2</li> 
                        <li onclick="openChat(this)">user3</li>
                        <li onclick="openChat(this)">user4</li>
                        <li onclick="openChat(this)">user5</li>
		</ul>
	</div>

<div id="main"></div>

＆＃13;

我的代码https://github.com/marti1125/paint/blob/master/js/app.js

获取uuid的另一种方式（通用唯一标识符）http://jsfiddle.net/briguy37/2mvfd/

使用javascript为div中的元素添加唯一ID

4 个答案: