JavaScriptを利用した電卓

Question

前提・実現したいこと

（例） JavaScriptで電卓のシステムを作っています。
以下のサイトを参考にして作りました。
https://webukatu.com/wordpress/blog/27277/
この時に、「×」と「÷」のボタンを押すと、「*」、「/」になってしまいます。
この表示を「×」、「÷」にしたいですが、どこを変えればいいのかわかりません。

[訂正]
（また、「C」ボタンもわかりやすくするため、色を変えたいです。）
解決しました。

発生している問題

・×と÷の正しい表示ができない

該当のソースコード

<meta charset="utf-8">




  <form name="dentaku">
    <table>
      <!-- 液晶画面部分 -->
      <tbody><tr>
        <td colspan="4">
          <input type="text" class="display" name="display" value="" disabled="">
        </td>
      </tr>

      <!-- 上から1段目（7~9＋÷） -->
      <tr>
        <td><input type="button" value="7" onclick="get_calc(this)"></td>
        <td><input type="button" value="8" onclick="get_calc(this)"></td>
        <td><input type="button" value="9" onclick="get_calc(this)"></td>
        <td><input type="button" value="÷" class="operator" name="div_btn" onclick="get_calc(this)"></td>
      </tr>
        
      <!-- 上から2段目（4~6＋×） -->
      <tr>
        <td><input type="button" value="4" onclick="get_calc(this)"></td>
        <td><input type="button" value="5" onclick="get_calc(this)"></td>
        <td><input type="button" value="6" onclick="get_calc(this)"></td>
        <td><input type="button" value="×" class="operator" name="multi_btn" onclick="get_calc(this)"></td>
      </tr>

      <!-- 上から3段目（1~3＋-） -->
      <tr>
        <td><input type="button" value="1" onclick="get_calc(this)"></td>
        <td><input type="button" value="2" onclick="get_calc(this)"></td>
        <td><input type="button" value="3" onclick="get_calc(this)"></td>
        <td><input type="button" value="-" class="operator" onclick="get_calc(this)"></td>
      </tr>

      <!-- 上から4段目（0/C/=/+) -->
      <tr>
        <td><input type="button" value="0" onclick="get_calc(this)"></td>
        <td><input type="button" value="C" onclick="get_calc(this)"></td>
        <td><input type="button" value="=" class="equal" onclick="get_calc(this)"></td>
        <td><input type="button" value="+" class="operator" onclick="get_calc(this)"></td>
      </tr>

    </tbody></table>
  </form>

    /* テーブルの装飾 */
    table {
      /* 電卓のサイズ */
      width: 300px;
      height: 400px;
      /* 電卓が浮き出るように影を付ける */
      border: solid 1px #dcdcdca4;
      border-right: solid 4px #dcdcdca4;
      border-bottom: solid 4px #dcdcdca4;
      border-radius: 10px;
      /* インライン要素を中央に配置 */
      text-align: center;
      /* 余白調整 */
      padding: 8px;
      margin: 20px;
    }
 
    input {
      /* ボタンのサイズ */
      width: 70px;
      height: 70px;
      /* ボタンの文字サイズ */
      font-size: x-large;
      /* 数字部分の背景色 */
      background-color: #dcdcdca4;
      /* ボタンの詳細設定 */
      border: none;
      border-radius: 20px;
      /* クリック時の黒枠を消す */
      outline: none;
    }
    
    /* ディスプレイの詳細設定 */
    .display {
      width: 250px;
      text-align: right; /* 文字を右詰めに */
      /* 見た目の詳細設定 */
      background: #ffffff;
      border-top: solid #dcdcdca4 5px;
      border-bottom: solid #dcdcdca4 5px;
      border-right: solid #b6b6b6 6px;
      border-left: solid #b6b6b6 6px;
      border-radius: 5px;
    }
    /* 演算子の背景色を上書きで設定 */
    .operator {
      background-color: #87cefa;
    }
    /* 記号＝の部分の背景色を上書きで設定 */
    .equal {
      background-color: #b6b6b6;
    }
 
    /* カーソルを上に乗せた時に色を濃くする */
    input:hover {
      background: #747373b9;
    }
    .display:hover {
      background: #ffffff; /* ディスプレイ部分は無効化 */
    }
    .operator:hover {
      background: #339cdd;
    }
 
    /* クリック時に色を濃くする */
    input:active {
      background:  #5a5a5a;
    }
    .operator:active {
      background: #2c80b4;
    }

<script>
    function get_calc(btn) {
      if(btn.value == "=") {
        document.dentaku.display.value = eval(document.dentaku.display.value);
      } else if (btn.value == "C") {
        document.dentaku.display.value = "";
      } else {
        if (btn.value == "×") {
          btn.value = "*";
        } else if (btn.value == "÷") {
          btn.value = "/";
        } 
        document.dentaku.display.value += btn.value;
        document.dentaku.multi_btn.value = "×";
        document.dentaku.div_btn.value = "÷";
      }
    }
  </script>

試したこと

Javascriptの一部の文の改正を行いました。

     if (btn.value == "×") {
          btn.value = "*";
        } else if (btn.value == "÷") {
          btn.value = "/";
        } 

補足情報（FW/ツールのバージョンなど）

ホームページ作成ツール「まめわざ」を使用しています。
現在の作成状況（実態）
https://asa-kyo.1web.jp/30509/calculator.html

Comments

[1T2R3M4]

https://qiita.com/mis992821/questions/d18c8ee397b288cd1aa1

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

こんなイメージでしょうか？

■ サンプルコード
https://jsfiddle.net/cx20/jcm52ot3/

■ 実行結果

以下、変更箇所になります。

■ 計算式の全角表示

function convertZenkakuToHankaku(zenkaku) {
  let result = zenkaku;
  result = result.replace("×", "*");
  result = result.replace("÷", "/");
  return result;
}

function get_calc(btn) {
  if(btn.value == "=") {
    //document.dentaku.display.value = eval(document.dentaku.display.value);
    document.dentaku.display.value = eval(convertZenkakuToHankaku(document.dentaku.display.value));
  } else if (btn.value == "C") {
    document.dentaku.display.value = "";
  } else {
/*
    if (btn.value == "×") {
      btn.value = "*";
    } else if (btn.value == "÷") {
      btn.value = "/";
    } 
*/
    document.dentaku.display.value += btn.value;
    document.dentaku.multi_btn.value = "×";
    document.dentaku.div_btn.value = "÷";
  }
}

■ 「C」ボタンの色の変更

<!-- <input type="button" value="C" onclick="get_calc(this)"> -->
<input type="button" value="C" class="clear" onclick="get_calc(this)">

/* 記号Cの部分の背景色を上書きで設定 */
.clear {
  background-color: #e29dbc;  
}

.clear:hover {
  background: #924d6c;  
}

.clear:active {
  background: #823d5c;  
}

Comments

[ROGPURS]

回答ありがとうございます。
無事にできました！
本日は回答ありがとうございました。

Answer 2

この表示を「×」、「÷」にしたいですが、どこを変えればいいのかわかりません。

eval(document.dentaku.display.value)としていますので、単純に「×」、「÷」に代えると計算ができなくなります。
ですので、document.dentaku.display.value は表示用として、計算用の文字列を別に持つ必要があるでしょう。

---

また、「C」ボタンもわかりやすくするため、色を変えたいです。

CSSで背景色を指定するのがいいでしょう。

input[value="C"] {
	background: red;
}

Comments

[ROGPURS]

回答ありがとうございます。
「C」ボタンは入力ミスでできなかったようで無事にできました。
ありがとうございます。
もう一つの×・÷の件ですが、私は、 JavaScriptが初心者で計算用の文字列をどのように別で作るのかを教えていただけるとありがたいです。

[Lhankor_Mhy]

・グローバルに別に変数を用意し

let formula = ""

・document.dentaku.display.value と同じく操作をするように記述を変え（×÷だけ別にする）

document.dentaku.display.value = "";
fomula = "";
など

・eval は計算用の変数を対象にする

eval(fomula)

などとしてみてください。

[Lhankor_Mhy]

と、思ったのですが、cx20さんのご回答の eval の際に置換するやり方の方が楽そうです。
そっちをお試しになってみてはどうでしょうか。

[ROGPURS]

回答ありがとうございます。
Lhankor_Mhyさんのでも、cx20さんのでもどちらでもできました！
今回は、お勧めしていただいたcx20さんの方で実装させていただきました。
回答ありがとうございました。

Answer 3

以下でちゃんとbtnのvalueを変更してますね。

        if (btn.value == "×") {
          btn.value = "*";
        } else if (btn.value == "÷") {
          btn.value = "/";
        } 

*や/は計算処理時の演算子として必要なだけのはずで、btnのvalueを変える必要はないと思います。

Comments

[ROGPURS]

対象となる上の文をそのまま消していいということですか？

[m.ts10806]

「ボタンを押すと〜になってしまう」原因について言及したのみです。
消すことにより要件通り動くかはまた別の話で、しっかりとロジック考えてコードに反映してください。