javascriptのDOMイベント操作での変数について
解決したいこと iがうまく加算されない
「丁」「半」というボタンを押すと、下に同じボタンが生成され、
上の「丁」「半」ボタンの削除を行いたいが一度目以外はうまく動作しない。
変数iを使ってボタンのIDを設定し、i=削除対象 i+1=新規ボタンの作成を行っているが、iが正常に加算されていないためと思われる。
この場合のiの処理や考え方をご教授いただきたいです。
尚、エラーは出ていません。
<body>
<div id="game">game!
<div id="div1"></div>
<button id="Tbutton1" class="T">丁</button>
<button id="Hbutton1" class="H">半</button>
</div>
<script>
i = 1;
const onClick =()=>{
//親取得
let parent = document.querySelector("#game");
//新規div,buttonを取得
let item = document.createElement("div");
item.textContent="丁半を選択してください";
let but =document.createElement("button");
but.innerText="丁"
let but2 =document.createElement("button");
but2.innerText="半"
//div,buttonにIDをつける
item.id = "div"+(i+1);
but.id="Tbutton"+(i+1);
but2.id="Hbutton"+(i+1);
//ボタンにクラスをつける
but.class="T";
but2.class="H";
//子を生成
parent.appendChild(item);
parent.appendChild(but);
parent.appendChild(but2);
//テストコード
let childs = parent.children;
console.dir(childs);
//上にあるボタンの削除、テキスト変更
let target1 = document.querySelector("#Tbutton"+i);
let target2 = document.querySelector("#Hbutton"+i);
let result =document.querySelector("#div"+i);
result.textContent="当たり";
console.dir(target1);
console.dir(target2);
target1.remove();
target2.remove();
i++;
console.log(i);
};
//丁ボタンクリック呼び出し
const clickBut1=document.querySelector("#Tbutton"+i);
console.dir(clickBut1);
clickBut1.addEventListener("click", ()=> onClick());
console.log(i);
//半ボタンクリック呼び出し
const clickBut2=document.querySelector("#Hbutton"+i);
console.dir(clickBut2);
clickBut2.addEventListener("click", ()=> onClick());
console.log(i);
</script>
</body>
自分で試したこと
グローバル変数について学びなおしましたが、解決には至りませんでした。
0
