const hints = [
"ロシア連邦",
"ほうれん草",
"79kcal",
"炒める"
];
これらを、window.alertで表示させようとして以下のコードを書きました。
const $button = document.getElementsByTagName("button");
$button[0].addEventListener("click", ()=>{
window.alert($button[0].textContent = hints[0]);
});
$button[1].addEventListener("click", ()=>{
window.alert($button[1].textContent = hints[1]);
});
$button[2].addEventListener("click", ()=>{
window.alert($button[2].textContent = hints[2]);
});
$button[3].addEventListener("click", ()=>{
window.alert($button[3].textContent = hints[3]);
});
このコードをwhile文でループさせてリファクタリングをしようと以下のコードを書き込みました。
let hintsIndex = 0;
let hintsLength = $button.length;
while (hintsIndex < hintsLength) {
$button[hintsIndex].addEventListener("click", ()=>{
window.alert($button[hintsIndex].textContent = hints[hintsIndex]);
});
hintsIndex++;
};
リファクタリング前のコードだと正常に機能するのですが、後者のコードではボタンをクリックしてもwindow.alertが出ず、無反応です。
どのようにすれば正常にWindow.alertが出るようになるのでしょうか。お教えいただけると幸いです。