How can I add unique IDs to elements using JavaScript?

Question

I want to add unique id to each paragraph element inside the function 'chatSubmit' as seen in the below code. the DOM is generated dynamically and paragraph has an ID textDisplay which has to be different for newly added DOM elements.

here is the demo in fiddle: 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

I have updated your code. Please check the updated code :

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>

You can generate this html by storing username and id in one array and loop it.

Please refer here

Answer 2

try, Each message will have tag with unique 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/ Is this what you want??tell me if you need something else..

Answer 3

Use below code to generate random 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

here you are an example

//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);
}

*{
	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;}

<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>

my code https://github.com/marti1125/paint/blob/master/js/app.js

another way to get uuid(Universally unique identifier) http://jsfiddle.net/briguy37/2mvfd/