今さら聞けないHTML　2021年12月13日

JavaScriptで配列からランダムに要素を取得【OBGノウハウ】

JavaScriptのMath.floorメソッドとMath.randomメソッドを用いて、配列からランダムにお題を取得し表示するページを作りました。

今回は「山手線ゲーム」のお題をランダムに1つ取得して表示します。

コロナ禍でなかなかリアルでの飲み会は難しい世の中ではありますが、忘年会の季節なので飲み会鉄板ゲームとして「山手線ゲーム」がありますね。
山手線の駅名を言っていく単純なゲームではありますが、お題を変えて楽しむこともできます。
なかなかパッと良いお題が思い付かないことが多かったので、配列操作の学習も兼ねて作ってみました。

#ページ作成


Clickボタンを押下することでグレーの枠線内にお題がランダムで表示されます。
まずはHTMLでページを作成していきます。

“`html

デザイナーが実装で見るべき４つのポイント

[Ateam Lifestyle Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-lifestyle)の13日目は、株式会社エイチームライフスタイル @snd-07 が担当します。

## はじめに

2021年を振り返ってみると、環境が変化した年でした。
今まではチームの人数が多く、自分よりも技術力の高い先輩がたくさんいる環境でちっぽけな戦力でしたが、現在はチームの人数が減ったこともあり、自分の責務は大きくなりました。
それに比例して、自分の作業や確認に対する**意識・質**は、自ずと高くなったと思います。

この記事では、Webデザイナーの @snd-07 が普段、`HTML/CSSの実装をする際`や`他のメンバーのコードレビューを行う際`に気をつけていることをまとめました。
参考になれば幸いです:slight_smile:

## 読んでほしい人

– Webデザインに関わる人
– HTML/cssに関わる人

## :heavy_check_mark:表示のチェック

プロダクトに触れる状況は

JavaScriptだけでMultiple Select

普段は何かしらのライブラリを探して使ってますが、お勉強がてらJavaScriptだけで作ってみることに。

# 実装する機能
* セレクトボックスをクリックすると選択肢が表示
* 選択肢をクリックするとセレクトボックスに移動
* セレクトボックスの選択肢を×ボタンで削除可能
* セレクトボックス内 or 要素外をクリックすることで選択肢を閉じる

# 完成品

See the Pen 【Memo of Bug】JavaScript(Jquery)で作成したボタンのイベントが発火しない

#JavaScript(Jquery)で作成したボタンのイベントが発火しない
もしくは、イベントが効かない、反応がない

##今回遭遇したバグ
:::note alert
JSで要素を追加した上に、イベントを設定した。
そのイベントが発火しない
:::

> 詳細
Jqueryの　.html()で　ボタン要素を作成した後、ボタンを制御するScriptを書いたけど、
ボタンは表示されているが、ボタンを押しても反応がない。

“`JavaScript:
var data=[
{“id”:1,
“code”:”001″,
“name”:”name1″},
{“id”:2,
“code”:”002″,
“name”:”name2″},
{“id”:3,
“code”:”003″,
“name”:”name3″},
]

var data1=[
{“id”:1,
“code”:”001″,
“name”:”name1 for output1″},
{“id”:2,
“code”:”002″,
“name”:”name2 for output1″},
{“id”:3,

CSS スクロール要素の中のテーブルのヘッダー固定　(自分メモ)

“`html