パソコンを便利に！！

前回記事で、javascript を使ってブログの記事内で計算できる「計算ページ」のようなものを作ることは、そんなに難しくないことが分かりました。
　　　↓
　ブログの記事内でJavaScriptを使って計算できるようにする

上の画像は前回記事で作ったもので、とりあえず javascript を使って計算できるかを確認するだけのものなので、見た目とか何とかしたいところですが、今回は機能を優先することにします。
追加する機能は、計算結果をコピーできるボタンの設置です。
これができれば、計算結果を別のアプリに貼り付けることができるので、少し便利になります。

計算結果コピーボタンを追加した計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
追加したのは、見た目では［Ａ＋Ｂの答えをコピー］ボタンと［Ａ×Ｂの答えをコピー］ボタンで、表示されない JavaScript にボタンをクリックしたときの処理を書き加えています。
ＡとＢに数値を入力して［計算］ボタンをクリックすると計算結果が表示され、2つのコピーボタンをクリックすると、計算結果がクリップボードにコピーされるはずです。

変更したコードの解説（フォーム）

上で設置した計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV2">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">
  <input type="button" name="keisan" value="計算" onClick="calTasuKakeruV2();">
  <input type="reset" name="reset" value="クリア">
  Ａ＋Ｂ＝<input type="text" id="ans1" value="">
  Ａ×Ｂ＝<input type="text" id="ans2" value="">
  <input type="button" value="Ａ＋Ｂの答えをコピー" onClick="AnsCopy1();">
  <input type="button" value="Ａ×Ｂの答えをコピー" onClick="AnsCopy2();">
</form>

赤色部分が今回変更または追加した部分です。

１）フォームと JavaScript の名前に「V2」を追加
計算フォームと［計算］ボタンで呼び出す JavaScript の名前は、前回記事で使ったものと同じだと JavaScript がどちらか判断できないので、「V2」を加えることで、別のフォームと別の JavaScript として扱うようにしています。

２）計算結果の name を id に変更
計算結果をコピーする２つのボタンをクリックしたときに、JavaScript で計算結果をコピーする処理を書いていますが、そのときにどの値をコピーするかを id でしていするため、name を id に変更しています。

３）計算結果をコピーするボタンのコードを追加
最後の2行に、計算結果をコピーするボタンのコードを追加しています。
それぞれのボタンのコードの最後の onClick="AnsCopy1();" と onClick="AnsCopy2();" で、計算結果をコピーする JavaScript を呼び出しています。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV2()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV2.a.value - 0;
  inputValueB = document.calformTasuKakeruV2.b.value - 0;

  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;

  // 計算結果をフォームに出力
  document.calformTasuKakeruV2.ans1.value = ans1;
  document.calformTasuKakeruV2.ans2.value = ans2;
}
// 計算結果をコピー
function AnsCopy1() {
    var copyTarget = document.getElementById("ans1");
    copyTarget.select();
    document.execCommand("Copy");
}
function AnsCopy2() {
    var copyTarget = document.getElementById("ans2");
    copyTarget.select();
    document.execCommand("Copy");
}
</script>

赤色部分が今回変更または追加した部分です。

１）JavaScript と フォームの名前に「V2」を追加
フォームの説明で書いたように、前回記事の JavaScript と フォームと名前が重複しないようにするため、それぞれの名前に「V2」を追加しています。

２）計算結果をコピーするコードの追加
「// 計算結果をコピー」の下に加えたのが、計算結果をコピーするコードです。
［Ａ＋Ｂの答えをコピー］ボタンの処理を function AnsCopy1() に、［Ａ×Ｂの答えをコピー］ボタンの処理を function AnsCopy2() に書いています。

３）var copyTarget = document.getElementById("ans1");
フォームで計算結果の name を id に変更しましたが、その計算結果 id="ans1" を変数 copyTarget に指定してしています。

４）copyTarget.select();
クリップボードにコピーするために、３）で指定した変数 copyTarget を選択しています。

５）document.execCommand("Copy");
３）と４）で選択したコピー対象を、このコードでクリップボードにコピーしています。

その他

フォームと JavaScript は、ブログの中で重複しないように名前を付けること、クリップボードにコピーする対象は name じゃなくて id で名前を付けるという点に注意すれば、今回のコピー機能追加は難しくないと思います。
まだ、改良したいところがいくつかあるので、次回以降の記事で書いていきます。