如何使用 JavaScript 为元素添加唯一 ID
How can I add unique IDs to elements using JavaScript?
我想为函数"chatSubmit"中的每个段落元素添加唯一的id，如下面的代码所示。 DOM 是动态生成的，段落有一个 ID textDisplay，对于新添加的 DOM 元素，该 ID 文本显示必须不同。
这是小提琴中的演示：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);
}
我已经更新了你的代码。请检查更新的代码：
.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>
您可以通过将用户名和密码存储在一个数组中并循环它来生成此 html。
请参考这里
这里是一个例子
//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>我的代码 https://github.com/marti1125/paint/blob/master/js/app.js
获取uuid（通用唯一标识符）http://jsfiddle.net/briguy37/2mvfd/的另一种方法
使用以下代码生成随机 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);
}
尝试，每条消息都将具有具有唯一 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/这是你想要的吗？？告诉我你是否需要其他东西..
相关文章：
- 向Graph中的所有d3.js数据点添加唯一链接
- 向不同的数组元素添加唯一的 css
- 向数组添加唯一元素
- 如何动态地向单选按钮添加唯一 ID
- 如何使用 JavaScript 为元素添加唯一 ID
- 向类中的所有元素添加唯一的侦听器
- MongoDB/Meteor:为每个数组元素添加唯一的ID
- 为标记添加唯一的信息窗口，并更新数据库以存储信息(谷歌地图api）
- 如何为onclick事件添加唯一的id
- Javascript/jQuery:确保在下拉菜单中添加唯一选项
- jQuery UI选项卡示例-打开新选项卡=为每个选项卡添加唯一的脚本
- 自动为PDF下载添加唯一编号
- 仅向数组中添加唯一对象
- 在JavaScript中只向数组添加唯一对象
- 在JQuery中克隆并为每个添加唯一的id
- 如何在循环期间添加onclick事件时添加唯一参数
- 为每行中的每个td添加唯一的类
- 为克隆的表单元素添加唯一名称
- 如何为动态添加的控件添加唯一的id (Asp.net MVC)
- 为防止ie缓存，在Jquery函数url后添加唯一值
