JavaScriptをクリックするたびにIDを増やす

Question

クリックごとにIDを増やしたい私は2時間を過ごしましたが、何とか私はそれをすることができませんでした。

var app = document.getElementById('app'); 
 
var circle = document.querySelector('.mny-circle'); 
 
var item = document.querySelector('.mny-item'); 
 
var button = document.querySelector('.mny-btn'); 
 
var id = 0; 
 

 
var UIcontroller = function() { 
 
    var newItem = '<div id="item-%id%" class="mny-item">Deneme</div>'; 
 
    var addItem = newItem.replace('%id%', id); 
 
    var clickbtn = function() { 
 
    button.addEventListener('click', function() { 
 
     circle.insertAdjacentHTML('beforeend', addItem); 
 
    }); 
 
    id++; 
 
    } 
 
    clickbtn(); 
 
} 
 

 
UIcontroller();

<div id="app"> 
 
    <button class="btn btn-sm btn-warning mny-btn">Click</button> 
 
    <div class="mny-circle"></div> 
 
</div>

Answer 1

ここにあります。

var app = document.getElementById('app'); 
 
var circle = document.querySelector('.mny-circle'); 
 
var item = document.querySelector('.mny-item'); 
 
var button = document.querySelector('.mny-btn'); 
 

 

 
var UIcontroller = function() { 
 
    var id = 0; 
 
    var newItem = '<div id="item-%id%" class="mny-item">Deneme</div>'; 
 

 
    var clickbtn = function() { 
 

 
    button.addEventListener('click', function() { 
 
     
 
     circle.insertAdjacentHTML('beforeend', newItem.replace('%id%', id)); 
 
     id++; 
 
    }); 
 

 
    } 
 
    clickbtn(); 
 
} 
 

 
UIcontroller();

<div id="app"> 
 
    <button class="btn btn-sm btn-warning mny-btn">Click</button> 
 
    <div class="mny-circle"></div> 
 
</div>

Answer 2

次のようにする必要があります：

button.addEventListener('click', function() { 
    var addItem = newItem.replace('%id%', id); 
    circle.insertAdjacentHTML('beforeend', addItem); 
    id++; 
}); 

あなたはクリックイベントにIDをインクリメントする必要があります。