パソコンを便利に！！

前回記事で、計算結果をクリップボードにコピーできるボタンが設置できました。
　　↓
　計算結果をコピーできるボタンを設置する／ブログでJavaScriptで計算

今回からは、少し見た目の改善をしていきます。
まずは、計算結果の数字の桁数が大きくなったときに、3桁区切りのカンマを入れて表示するようにします。
やり方は、「JavaScript　3桁区切り」といった言葉でネット検索すると、すぐに見つかりました。
しかも、JavaScript の計算結果を計算フォームに返す部分に、「.toLocaleString()」を加えるだけなので簡単です。

計算結果の数字に3桁区切りのカンマが入る計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
ＡとＢに少し大きめの数字を入力して計算すると、答えの数字に3桁区切りのカンマが入るはずです。

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

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

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

赤色部分が今回変更または追加した部分です。
計算フォームは基本的に変更なしで、前回記事のコードとの重複を避けるためにフォームと JavaScript の名前の「V2」を「V3」に変更しただけです。
（AnsCopy1V3() の部分は、前回のコードの AnsCopy1() に「V3」を加えています）

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

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

<script language="javascript">
function calTasuKakeruV3()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV3.a.value - 0;
  inputValueB = document.calformTasuKakeruV3.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV3.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV3.ans2.value = ans2.toLocaleString();
}
// 計算結果をコピー
function AnsCopy1V3() {
    var copyTarget = document.getElementById("ans1");
    copyTarget.select();
    document.execCommand("Copy");
}
function AnsCopy2V3() {
    var copyTarget = document.getElementById("ans2");
    copyTarget.select();
    document.execCommand("Copy");
}
</script>

赤色部分が今回変更または追加した部分です。
「V2」が「V3」に変わっているのは、計算フォームの変更と同じコードの重複を避けるためのものです。
結局変わったのは、計算結果をフォームに出力する部分の ans1 と ans2 の後ろに「.toLocaleString()」を加えただけということになります。

今回の変更によって、クリップボードにコピーする計算結果も、3桁区切りのカンマが付いた数値でコピーされます。
貼り付け先によっては、3桁区切りのカンマが使いない方がいい場合もありそうです。
次回記事で、その方法を書いてみます。