javascript for文で表を出す

Question

前提・実現したいこと

htmlとjavascriptでクリックされたら100人分の表を作成するプログラムを作成しています
クリックを何回押しても100人分だけ表示したいのですが、分かりません

発生している問題・エラーメッセージ

クリックを押すと100人分出ますが、もう一度クリックすると下にもう100人分出てくるので  
二度目以降のクリックを無効にするか、二度目以降を削除するかのコードの書き方が分からなく困っています  

試したこと

記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。
子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

> <table id="table" type="button"

当該タグにtypeという属性は用意されておりません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
が、何を参考にしたのでしょう。

>disabled属性を使おうと試みましたが動かなくなったりしました。

そのコードを提示しましょう。

というか、手法から考えるのではなく、仕様･設計からかためましょう。

[yambejp]

順番に表示するのか、ランダムに表示するのかによって違うでしょう
最初が成功して２回めの追加が気に入らないなら
２回めは最初のデータを消せばいいでしょう

[m.ts10806]

結局どのように解決とされたのでしょうか。

Answer 1

簡単にするならフラグの管理(あくまでbooleanの変数)。
クリックイベントの最初でチェックしてreturn。
クリックイベントの最後でtrue/falseを切り替える。

ただ、そもそも「テーブルをクリックする」というのがUX的にどうなのか一考してください。

Answer 2

countLimitを定義してif文で回数指定しました。

Comments

[m.ts10806]

「フラグとは」で調べてきてください。
わざわざbooleanという絶対的なキーワードまで出してますよ。

[t_t_t_t_t_t]

フラグとはオンかオフのどちらかの状態を表す値が入る変数と出てきました。
booleanについての記事をいくつか見ましたが、ここのコードに入れる方法が分かりませんでした。

[m.ts10806]

var countLimit = 0;
↓
var dispflg = false;
に変更。

if (countLimit < 100) {
↓
if (!dispflg) {
に変更。

countLimit++;
を削除。

if (!dispflg) {
//中略
}
dispflg = true;//追加

ちなみにカウントだけで見たいならnumをグローバルスコープで宣言すればわざわざcountlimitのような変数を別途用意する必要はありません。

まあaddがあればremoveがあるので、フラグやカウントで管理せずとも、要が済んだら単にイベント削除でも良い気もします。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

[t_t_t_t_t_t]

ご丁寧にありがとうございます！！
うまく動きました。true,falseの使い方次第でそんなことができるということを知り勉強になりました。
教えて頂きありがとうございました。

[m.ts10806]

たぶん今回はremoveしたほうがいいとは思いますけどね。

[t_t_t_t_t_t]

removeも一度試みましたが、良くわかりませんでした。。。

[m.ts10806]

現コードだとcountlimit関連全部取っ払って下記をaddの最後に入れれば良いだけのように思います(未検証)
table.removeEventListener("click");

[t_t_t_t_t_t]

a

[m.ts10806]

「変わらない」とは。

[t_t_t_t_t_t]

最初のコードの状態と同じでした。
位置が悪いのですかね？？