LoginSignup
1
3
@Atsu1209jp(Atsu1209 StedTech)

HTMLで電卓作ってみた

Last updated at Posted at 2023-05-21

はじめに

どうも Atsu1209です♪
この間 友達が書いた"pythonで電卓作ってみた"っていう記事を投稿したけど、
HTMLでも電卓作りたくなったから作ってみた。
まだ初心者なので変なところ合っても温かい目でみてください。

早速作っていく

まずはいつも通りのやつ書きます

math.html
<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="UTF-8">
<title>Math</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>

</body>
<script>

</script>
<style>

</style>
</html>

毎度同じようにCSSがめんどくさいのでMaterialize使います。
ここまではいつも通り。
だけど ボタンの配列で、CSS使うので<style>タグを書いておきます。

ボタンを置く

次はめんどくさいけど1~9,0,00,+、=などの記号を一つ一つおいておきます。

math.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Calculator</title>
    <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  </head>
   <body>
      <div class="num">
     <button onclick="insertText1()" class="btn">1</button>
     <button onclick="insertText2()" class="btn">2</button>
     <button onclick="insertText3()" class="btn">3</button>
     <button onclick="insertTextp()" class="btn">＋</button>
     <div class="down">
     <button onclick="insertText4()" class="btn">4</button>
     <button onclick="insertText5()"class="btn">5</button>
     <button onclick="insertText6()"class="btn">6</button>
     <button onclick="insertTextm()"class="btn">ー</button> 
   </div>
   <button onclick="insertText7()"class="btn">7</button>
   <button onclick="insertText8()"class="btn">8</button>
   <button onclick="insertText9()"class="btn">9</button>
   <button onclick="insertTextk()"class="btn">✕</button>
     <div class="down">
   <button onclick="insertText00()"class="btn">00</button>
   <button onclick="insertText0()"class="btn">0</button>
   <button onclick="insertTextin()"class="btn">.</button>
   <button onclick="insertTextsl()"class="btn">÷</button>
   <button class="btn"onclick="calculate()">=</button>
     </div>
      </div>
     <textarea id="myTextarea"></textarea>
      <div class="red-text" id="result"></div>     
     </body>
  <script>
 
  </script>    
  <style>  
 
  </style>
</html>

ここまで意外と時間が掛りました。後でJSを使って計算するので
onclickをつけておいて、materializeのbtnクラスもつけておきます。
また<div class=down>を使って、CSSボタンを一段下に下げるためのクラス
をつけておきます。またtextareaタグも書いておきます。

JavaScript使ってtextareaに入力

次にボタンを押したらtextareaの中に文字が入力されるようにします。
全部書くと長すぎるので、JavaScriptのみ書きます。

math.html
<script>
function insertText1() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "1";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
     function insertText2() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "2";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText3() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "3";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextp() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "+";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
function insertText4() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "4";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText5() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "5";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText6() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "6";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextm() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "-";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText7() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "7";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText8() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "8";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText9() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "9";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextk() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "*";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText00() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "00";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText0() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "0";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextin() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = ".";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextsl() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "/";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function calculate() {
  var textarea = document.getElementById("myTextarea");
  var expression = textarea.value;
  var result = eval(expression);
  document.getElementById("result").innerHTML = result;
}
</script>

ボタンにつけたonclickを呼び出して、クリックが感知されたらtextareaに書き込む仕組みです。
また一番最後のfunctionでtextareaの中にある計算式を計算してHTMLの中にある<div>タグを書き換えるようにになっています。

CSS使ってボタンを一段下げる

<style>タグを使ってhtmlの中にCSSを書きます。

math.html
<style>  
body .down {
       margin: 3px; 
   }
</style>

htmlのタグを呼び出し、ボタンを下げるようにしています。

全体コード

math.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Calculator</title>
    <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  </head>
   <body>
      <div class="num">
     <button onclick="insertText1()" class="btn">1</button>
     <button onclick="insertText2()" class="btn">2</button>
     <button onclick="insertText3()" class="btn">3</button>
     <button onclick="insertTextp()" class="btn">＋</button>
     <div class="down">
     <button onclick="insertText4()" class="btn">4</button>
     <button onclick="insertText5()"class="btn">5</button>
     <button onclick="insertText6()"class="btn">6</button>
     <button onclick="insertTextm()"class="btn">ー</button> 
   </div>
   <button onclick="insertText7()"class="btn">7</button>
   <button onclick="insertText8()"class="btn">8</button>
   <button onclick="insertText9()"class="btn">9</button>
   <button onclick="insertTextk()"class="btn">✕</button>
     <div class="down">
   <button onclick="insertText00()"class="btn">00</button>
   <button onclick="insertText0()"class="btn">0</button>
   <button onclick="insertTextin()"class="btn">.</button>
   <button onclick="insertTextsl()"class="btn">÷</button>
   <button class="btn"onclick="calculate()">=</button>
     </div>
      </div>
     <textarea id="myTextarea"></textarea>
      <div class="red-text" id="result"></div>     
     </body>
  <script>
  function insertText1() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "1";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
     function insertText2() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "2";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText3() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "3";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextp() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "+";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
function insertText4() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "4";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText5() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "5";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText6() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "6";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextm() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "-";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText7() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "7";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText8() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "8";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText9() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "9";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextk() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "*";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText00() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "00";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertText0() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "0";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextin() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = ".";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function insertTextsl() {
  var textarea = document.getElementById("myTextarea");
  var textToInsert = "/";
  var cursorPosition = textarea.selectionStart;
  var textareaValue = textarea.value;
  var textBeforeCursorPosition = textareaValue.substring(0, cursorPosition);
  var textAfterCursorPosition = textareaValue.substring(cursorPosition, textareaValue.length);
  textarea.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition;
}
    function calculate() {
  var textarea = document.getElementById("myTextarea");
  var expression = textarea.value;
  var result = eval(expression);
  document.getElementById("result").innerHTML = result;
}
  </script>    
  <style>  
    body .down {
       margin: 3px; 
   }  
  </style>
</html>

感想

今回は頭がおかしいくらいコードが長くなりました。
直せるところがたくさんあると思うのでコメントでアドバイスをしてくれると嬉しいです。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3