JavaScript
document.querySelectorAll の結果は NodeList で、forEach はできるが map や reduce はできない。 例えば、いくつかのテキストボックスに入力された数字を合計したい場合、document.querySelectorAll の結果をスプレッド構文で配列にするとよさそう。 cons…
iframe 組み込みの YouTube Player をモーダルに表示して、さらにモーダルを表示したタイミングで自動再生したい。あと、同一ページで2つの YouTube 動画を扱うパターン。 YouTube のモーダル表示については軽くググったらいい感じのライブラリがあった。 ka…
備忘録。 ある要素の click イベントで、Clipboard API を利用して要素内のテキストをクリップボードにコピーする。 document.querySelectorAll('.copy-to-clipboard').forEach((el)=> { el.addEventListener('click', (e) => { const text = e.currentTarge…
更新系のボタンクリックでローディングを表示して二重クリックを防止する実装をよく見かけるが、次のような操作をするとリクエストが二重送信できることがある。 ボタンクリック (ローディング表示) キーボードの Enter or Space 押下 ボタンクリックでボタ…
先日、JavaScript でこんな感じのコードを見かけました。 if (val == null || val == '') { // 値がないときの処理 } 値が null か空文字かをチェックするコードです。おそらく文字列を想定していたと思われますが、実際は変数に数値が代入されていました。 …
正数や小数のみ入力を許可するテキストボックスを Vue.js のコンポーネントとして作ってみました。一般的には type="number" を使うといいのかもしれませんが、今回はもろもろの事情により type="text" を使います。あと、Vue.js らしいところはあまりないで…
es6 で空のオブジェクトを返す関数書こうと思って () => {} って書いたら undefined が返っちゃって30分くらいハマってしまった...— kntmr (@knt_mr) 2018年1月9日 普通に考えれば当たり前なんですが、最初なにが起きてるのか分からなくてハマった...。 cons…