ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript

iframeから別のiframeのJavaScriptを呼び出す方法

index.htmlの中にiframeが左右にあります。 左のiframeの中の要素をクリックすると、右のiframeにクリックした要素に合わせたhtmlを表示しています。 左のiframeは、どの要素をクリックしたのかわかるようにするために、色が変わります。 また、要素が多いた…

Web画面でスクロールの動作が必要なら、scrollIntoView()が確実

Webの画面で、JavaScriptによるスクロールが必要になりました。 スクロールで検索してみると、scrollTo()を使った例がありました。 developer.mozilla.org実際に適用してみると、確かにスクロールができるようになりました。 スクロールができるようになりま…

JavaScript テーブルのrowspanを動的に変更する方法

テーブルで表示している内容を、ラジオボタンの操作でテーブルのrowspanを変更して表示しなければならなくなりました。下のテーブルのように、あるときは2行を結合、あるときは3行を結合します。 列1 列2 列1のデータ1 列2のデータ1 列2のデータ2 列1のデー…

JavaScript 評価に1点があった場合、コメント入力を必須にする方法

データの評価を行うシステムで、ラジオボタンで評価を選ぶと、評価の合計を行って表示するようにJavaScriptを書きました。 ajya.hatenablog.jp追加の機能で、観点のいずれかで「1」を選んだ場合、コメントの入力を必須にする、JavaScriptを書きました。 HTML…

JavaScript 評価の合計を求める方法

データの評価を行うシステムがあります。 評価の観点が複数あります。 ラジオボタンで観点ごとの点数を選び、合計を表示したいという要望があり、JavaScriptで合計を計算するようにしました。 HTMLのコード HTMLは以下のように、ラジオボタンをクリックされ…

jQueryプラグインChosenでクリックして選択できない現象

jQueryプラグインのChosenを適用して動作確認をしたところ、一度非表示にして再度表示にすると、Chosenを適用したセレクトボックスが無効状態のままになることに気がつきました。表示/非表示の切り替えは、以前書いた記事の方法で行っています。 JavaScript…

jQueryプラグインChosenで選択肢の表示幅が狭くなる現象

jQueryプラグインのChosenを適用して動作確認をしたところ、選択肢を選択するためにクリックすると、選択肢を表示をする部分の幅が狭く表示されました。 原因を調べる Chosen適用前のselectタグに幅を指定していますが、Chosen適用後に幅の指定はしていませ…

jQueryプラグインChosenで選択肢の動的変更方法

3年前に記事を書いた、jQueryプラグインのChosenで、他の選択肢に選択結果により、選択肢を動的に変更しなければならくなりました。 ajya.hatenablog.jp unsplash-logoPankaj Patel試した結果として、以下のようにすればできました。 // 選択肢削除 $('#sele…

JavaScript:htmlの書き換え方法

選択肢によって、必須マークの表示/非表示を切り替えなければならなくなりました。 操作するhtmlは以下のようになっています。 <body> <p> <span class='require'> <img src='./require.gif' alt='必須'>&nbsp; </span> 項目名 </p> </body> unsplash-logoDean Pugh非表示は、.remove()か.empty()を使ってspanタグ内を消してしまえばできるだろうと…

JavaScript:Internet Explorer 11だけは、子孫要素をまとめて無効にできる?

以前、テーブル内の子孫要素をまとめて無効にするためには、find()とeach()を使うと書きました。 ajya.hatenablog.jpこのとき、当初は $(".rowall").css("display", "none").prop('disabled', true); としていました。この記述を残したまま、以前の記事に書…

JavaScript:要素に割り当てたクラスが何個目になるのか取得する

inputタグのテキストボックスにクラスを割り当てていて、何個目のinputタグのテキストボックスに入力されたのか取得しなければならなくなりました。調べたところ、以下のようにjQueryのindex()を使うことで取得できました。 index(subject) - jQuery 日本語…

JavaScript:子孫要素をまとめて無効にする

テーブルの複数行をまとめて非表示にする方法として、tbodyタグでtrタグを挟んで、tbodyを指定して操作すると書きました。 ajya.hatenablog.jpテーブルの中にはinputタグが複数あり、非表示にしたときは、inputタグを無効にしたかったので、 $(".rowall").cs…

JavaScript:数値を3桁区切りにする方法はどうするのが無難?

JavaScriptで計算後表示をしたところ、4桁の数字になることに気がつきました。 4桁の数字になると、3桁毎のカンマ区切りをしないと違和感を感じます。3桁毎の区切りをする方法を検索すると、正規表現を使ったり、ループで回してつけたりする情報が見つかりま…

JavaScript:テーブルの複数行の表示/非表示をまとめて行うなら、tbodyタグを利用する

ラジオボタンの選択により、テーブルの複数行をまとめて表示/非表示を切り替えなくてはならくなりました。 trタグにclassを記述していれば、非表示にするには、 $(".row").css("display", "none"); でできて、表示にするには、 $(".row").css("display", ""…

JavaScript:ラジオボタンの値を取得してswitch文で分岐するときに少し悩む

jQueryで選択されているラジオボタンの値を取得して、switch文で処理を分岐させようとしました。 ラジオボタンのvalueには、数字を割り当てていたので以下のようにswitch文を書き、ラジオボタンをクリックしましたが、どちらのcaseにも該当せず処理がされま…

JavaScript:テキストボックスに値を入れてもchangeイベントが発生しない場合の対処

JavaScriptというかjQueryでテキストボックスに値を代入すると、代入されたら内容が変化するのでchangeイベントが発生すると思っていました。 $("input[name='abc']").val("テスト"); 実際には発生しません。内容が変化したらchangeイベントが発生しないとコ…

JavaScript:別ウィンドウ内のiframeで選択した内容を親ウィンドウのテキストボックスに設定する

Webサイトで、選択ボタンをクリックしたら、別ウィンドウを表示し、別ウィンドウで検索を行うと別ウィンドウ内のiframeに検索結果を表示するようにしました。 iframeの検索結果をクリックして、クリックした値を、別ウィンドウの親ウィンドウにあたるWebサイ…

JavaScript:val()メソッドを使わないでラジオボタンがチェックされているか判定する方法はないのか?

以前の記事にも書きましたが、JavaScriptでラジオボタンが選ばれているか取得するには、jQueryを使う場合、 if (!$("input:radio[name='check1']:checked").val()) { alert("チェックされていません"); } や var isCheck1 = $("input:radio[name='check1']:c…

JavaScript:一覧表の中のラジオボタンの周囲の色の変更方法

一覧表の中にラジオボタンがあり、他の要素の選択により、ラジオボタンの有効/無効を切り替えていました。 ラベル1 ラジオボタン1 ラベル2 ラジオボタン2 ラジオボタンのボタンの有効/無効を切り替えると同時に、ラジオボタンが配置されているセルの色も変…

JavaScript:子ウィンドウから親ウィンドウを再読み込みさせる方法 の訂正

5年近く前に書いた以下の記事のjQueryを使う書き方をそのままソースコードに書いたら動作しませんでした。 ajya.hatenablog.jpjQueryを使わない以下の書き方では動作しました。 window.opener.document.getElementById("search").submit(); window.close(); …

JavaScript:計算誤差の対処

JavaScriptで計算している部分で、想定と異なる結果になる場合がありました。 具体的には、36.3×700=25,410になるはずですが、25,409になります。ブラウザのデバッガで値を確認しても、36.3と700のまま掛け算をしていますが、25,409になります。 検索すると…

JavaScript:要素が有効な場合のみ、チェックされているか判定する方法

ラジオボタンAの選択によって、別のラジオボタンBの有効/無効状態を切り替えている場合に、JavaScriptでラジオボタンBがチェックされているかチェックをすると、ラジオボタンBが無効状態でもチェックはできてしまいます。そのため、ラジオボタンAの選択を確…

JavaScript:ラジオボタンの選択に従って、他のラジオボタンを制御するときの考え方

以下のようなname属性がtopとsubのラジオボタンがあります。 <input type="radio" name="top" value="4">top4 <input type="radio" name="top" value="5">top5 <input type="radio" name="top" value="44">top44 <input type="radio" name="top" value="0">top0 <input type="radio" name="sub" value="100">sub4

ブラウザがSafariでも、タブで開いているウィンドウをJavaScriptで閉じる方法

先日3年前に稼働させたシステムを再度稼働させる業務を行っていると書きました。 ajya.hatenablog.jpこのシステムに、作業が終わったら終了ボタンを押して、Webブラウザのウィンドウを閉じてもらうようになっている画面があります。 Internet Explorer 11で…

JavaScript:jQuery:複数のチェックボックスのうち、特定チェックボックスにチェックされたとき、入力欄を有効にする方法

複数のラジオボタンがあって、その他を選ばれた場合だけその他を入力してもらうための入力欄を有効にしなければならなくなりました。 手っ取り早く以下の方法で実現しました。HTML側その他を選ばれているか判定するために、id属性をその他にだけ追加します。 <form method="POST" action="next.php"></form>…

JavaScriptのオブジェクトを少し学びました

あるシステムで、データに対して5から-2の点数をつけることになりました。 複数のデータに対して、それぞれ点数をつけなければなりません。 何点を何個つけたのかを数える機能も必要です。例えば、3個データがあって、2個のデータに2点、1個のデータに-1点を…

JavaScript:クリップボードを操作できるライブラリ

先日この記事を読んでツイートしました。 clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFTSafariでは使えないけど、Edgeでは使えるのかな?/clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT https://t…

JavaScript:ラジオボタンがチェックされているか判定する方法

jQueryを使える場合 if (!$("input:radio[name='check1']:checked").val()) { alert("チェックされていません"); } で判定できます。 jQueryを使えない場合 var i; var flg = false; for (i = 0; i < document.form1.elements['check1'].length; i++) { if (…

JavaScriptが動かなくなった原因

全く修正していない部分が動作しなくなったので焦りました。 photo credit: JavaScript: The Good Parts via photopin (license)JavaScriptが動作しない1年以上前に同僚が作成したプログラムを元に、文字や色等見た目を変更して、新たに利用できるように設定…

JavaScriptでdiv要素の位置を設定

意外なところに落とし穴があって、悩みましたが解決しました。 photo credit: Selvin George via photopin (license)ブラウザをリサイズされているときでも、JavaScriptを使ってdiv要素を表示領域の中央に配置したくて調べました。表示領域のサイズを取得す…