テーブルのtdの中に、重複避けながらランダムに字を表示したい

題目の通りの症状です。知識不足でどこを直したらいいのかどうもよくわかりません。どなたかご教示をお願いします。
症状としては、クリックするとtdが消えて字だけが表示されてしまいます。字をクリックすると字が順繰りに変わる点は機能していますが、どうにかしてtdが消えずにその中に字を表示したいのですが。どうぞよろしくお願いします。
*///////////
<table id="mondaiBox">
<tr><td id="mondai">a</td></tr>
</table>

<script>
var n=1;
var flag = [];
var mondai = ['a','i','u','e','o','ka','ki','ku','ke','ko','sa','shi','su','se','so'];
function changeChr() {
var strMondai='';
for(var i=0;i<n;i++){
do x=Math.floor(Math.random()*mondai.length); while(flag[x])
flag[x]=true;
strMondai+=mondai[x];
}
document.getElementById("mondaiBox").innerHTML=strMondai;
}
var strMondai = document.getElementById("mondaiBox");
mondaiBox.addEventListener("click", changeChr, false);
</script>

No.2 回答者： fujillin 回答日時： 2021/03/17 15:00

こんにちは

一周したら終了なのか繰り返すのか不明なので、ひとまず繰り返しと考えるなら…
（なので、再シャッフルの際に連続する可能性があります）

以下のような感じではいかが？

const mondai = ['a','i','u','e','o','ka','ki','ku','ke','ko','sa','shi','su','se','so'];
const a = [];

document.getElementById('mondai').addEventListener('click', e => {
if(!a.length) {
for(let i = 0; i < mondai.length; i++) a[i] = i;
for(let i = a.length - 1; i > -1; i--){
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
}
e.target.textContent = mondai[a.pop()];
});

この回答へのお礼

いやー、すごいですね。お手のもんなんですね。
おかげさまで、思いの通り実現できましたました。
あれこれ無駄に試したり悩んだことがすっかり解消です。
本当にありがとうございました。

お礼日時：2021/03/17 20:48

No.1 回答者： Ogre7077 回答日時： 2021/03/17 11:19

click イベントの設定先を id=mondai の要素に変える

生成した文章の表示先を id=mondai の要素に変える

変数 x の宣言がない → グローバル汚染の危険あり
変数 flag を空にする処理が必要 → 無限ループで動作が止まる危険あり
文言の変更なら innerHTML より textContent がお勧め

この回答へのお礼

助言をありがとうございます。
勉強不足であまりよく理解でないのですが、この後研究させてもらいます。
どうもありがとうございます。

お礼日時：2021/03/17 20:51