Создание динамического класса names.OnlyJS

Question

var i = 0; 
 

 
function Myfunc() { 
 
    var newdiv = document.createElement('div'); 
 
    var el = document.createElement('div'); 
 
    var dynamicClass = "x" + i; 
 
    i++; 
 
    el.setAttribute('class', dynamicClass); 
 
    var c = document.getElementsByClassName(dynamicClass); 
 
    newdiv.appendChild(ele); 
 
    for (var j = 0; j < c.length; j++) { 
 
     c[j].appendChild(newdiv); 
 
    } 
 
}

<input type="hidden" value="0" id="nextValue"> 
 
<div class="x1">a...</div> 
 
<div class="x2">b...</div> 
 
<div class="x3">c...</div> 
 
<input type="button" onclick="Myfunc()" />

Я хочу создать динамически класса имена сохраняются на отдельной функции. Из моего опыта работы с Java и C я хочу, чтобы каждый раз я нажимал кнопку, и я запускаю функцию для увеличения переменной i (иначе измените название класса, как вы увидите ниже) и сохраните значение переменной i в память, чтобы он мог быть увеличен в следующий раз, когда функция была запущена снова.

function Myfunc(i) { 
 
    var newdiv = document.createElement('div'); 
 
    var el = document.createElement('div'); 
 
    var dynamicClass = "x" + i; 
 
    i++; 
 
    el.setAttribute('class', dynamicClass); 
 
    var c = document.getElementsByClassName(dynamicClass); 
 
    
 
    for(var j=0;j<c.length;j++){ 
 
    newdiv.appendChild(el); 
 
    } 
 
}

<div class="x1">a...</div> 
 
<div class="x2">b...</div> 
 

 
<div class="xn">c...</div> 
 

 

 
<input type="button" onclick="Myfunc()"/>

Как переменная я имеют предыдущее значение? Я студент еще с почти нулевым опытом с JS, если мой вопрос звучит тривиально.

Answer 1

Просто добавлено свойство данных на самой кнопке и передается " это 'к вызову функции, чтобы получить кнопку. Нет необходимости поддерживать глобальную переменную или другой скрытый элемент: http://jsfiddle.net/h0cuLuty/1/

JavaScript:

function Myfunc(obj) { 
    var i=parseInt(obj.getAttribute('data'),10); 
    var existing = document.getElementsByClassName('parent')[0]; 
    var el = document.createElement('div'); 
    var txt = document.createTextNode("x"+i); 
    el.appendChild(txt); 
    var dynamicClass = "x" + i; 
    el.setAttribute('class',dynamicClass); 
    existing.appendChild(el); 

    i++; 
    obj.setAttribute('data',i); 
} 

HTML:

<div class="parent"> 
</div> 

<input type="button" data="1" onclick="Myfunc(this)"/> 

Answer 2

Demo

Используйте скрытый элемент для хранения nextValue приращения

function Myfunc() { 
    var block = document.getElementById('block'); 
    var newDiv = document.createElement('div'); 
    var nextValue=document.getElementById("nextValue").value; 
    var dynamicClass="x" + nextValue; 
    newDiv.setAttribute("id", dynamicClass); 
    newDiv.setAttribute("class", dynamicClass); 
       newDiv.innerHTML=dynamicClass; 
     block.appendChild(newDiv); 
    document.getElementById("nextValue").value=++nextValue;   
} 

<form action="" method="get" > 
    <input type="hidden" value="0" id="nextValue" /> 
<div id="block">    
<div class="x1">a...</div> 
<div class="x2">b...</div> 
<div class="xn">c...</div> 
</div> 

<input type="button" onclick="Myfunc()"/> 
</form> 

Answer 3

Вы можете использовать атрибут элемента:

function Myfunc() { 
    var newdiv = document.getElementById('newDiv'); 
    var i = newdiv.getAttribute('ind'); 
    if(i === null) { 
     i = 0; 
    } else { 
     i = parseInt(i, 10); 
    } 

    var el = document.createElement('div'); 
    var dynamicClass = "x" + i; 
    i++; 
    newdiv.setAttribute('ind', i); 
    el.setAttribute('class', dynamicClass); 

    newdiv.appendChild(el); 
} 

<div id="newDiv"> 
<div class="x1">a...</div> 
<div class="x2">b...</div> 
<div class="xn">c...</div> 
</div> 
<input type="button" onclick="Myfunc()"/>