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

FYI other than this.. document.getElementById("main").appendChild(user); is not working in fiddle..for that you can directly do document.getElementById("main").innerHTML=user; — Dhara
– Dhara, Commented Jan 21, 2016 at 6:19
the script is there in the above code. the html is added dynamically when openChat function is invoked. — dvln
– dvln, Commented Jan 21, 2016 at 6:25

RIYAJ KHAN · Accepted Answer · 2016-01-21 09:06:02Z

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

Please accept it so we can close this quetion if it is working fine for you

marti_ · Accepted Answer · 2016-01-21 06:30:55Z

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/

AsgarAli · Accepted Answer · 2016-01-21 06:41:48Z

0

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

edited Jan 21, 2016 at 6:41

answered Jan 21, 2016 at 6:28

AsgarAli

2,2092 gold badges21 silver badges32 bronze badges

Comments

Dhara · Accepted Answer · 2016-01-21 07:38:57Z

0

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

edited Jan 21, 2016 at 7:38

answered Jan 21, 2016 at 6:17

Dhara

1,9722 gold badges19 silver badges41 bronze badges

5 Comments

Mi-Creativity Over a year ago

IDs should not be numeric only

Dhara Over a year ago

Updated @Mi-Creativity

dvln Over a year ago

thank you for the response! But, the user1 chat window should stay open even if we click on user2. and we should be able to send messages to different users like user1, user2 so on.

Dhara Over a year ago

I edited my answer..it will create different window..and there is one change in your code onClick = "chatSubmit(this.form)" what does this refer here ??..It will get only first clicked element and submit all message to that chat window only

dvln Over a year ago

'this' in "chatSubmit(this.form)" refers to the send button. im using "this .form" to access the input elements inside the form.

Collectives™ on Stack Overflow

How can I add unique IDs to elements using JavaScript?

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related