자바 스크립트로 HTML 요소의 ID를 동적으로 변경하십시오.

Question

괜찮습니다. 사물 목록을 작성하는 데 사용하는 사용자 정의 오브젝트를 작성했습니다. 이 사용자 지정 개체의 기능 중 하나는 개체를 목록에 추가하는 것입니다. 이 목록에는 목록에 추가 된 항목의 수를 추적하는 각기 다른 요소에 할당 한 값이 있습니다. 예를 들면 :

(3) 오브젝트 # 1
(2) 오브젝트 # 2

(3) 해당 오브젝트의 '카운트'값 인 물론 2. 내 문제는 내가 호출하여 동적으로 목록을 작성하고 있다는 것입니다 :

function Thing(count, value) 
{ 
    this.count=count; 
    this.value=value; 
} 

Thing.prototype.addToList = function() 
{ 
if (this.count == 0) 
{ 
    this.count++; 

    var list = document.getElementById("blah"); 
    var li = document.createElement("li"); 
    var interior = "<span id='counter'>("+this.count+")</span>"; 
    li.innerHTML = interior; 
    list.appendChild(li); 
} 
else 
{ 
    this.count++; 
    var countInc = document.getElementById("counter"); 
    countInc.innerHTML = "("+this.count+")"; 
} 
} 

이 잘 작동하지만 별도의 카운트 값을 여러 개체를 추가 할 생각하면, 거기에 그들 사이를 구별 할 수있는 방법이 없다, 그 결과 목록의 첫 번째 '카운터'범위가 가장 최근에 추가 된 객체의 계수 값으로 변경됩니다. 다른 모든 카운트 값은 동일하게 유지됩니다 (1). 나는 시도했다 :

var interior = "<span id='counter"+this.value+"'>("+this.count+")</span>"; 

매번 고유 ID를 만들지 만 작동하지 않는다. 기본적으로 새로운 객체를 인스턴스화 할 때마다 새 ID 값을 어떻게 만들 수 있는지 궁금합니다.

Answer 1

이

var list = document.getElementById("blah"); 
var li = document.createElement("li"); 
var interior = "<span id='counter-"+this.count+"'>("+this.count+")</span>"; 
li.innerHTML = interior;