Enjoy programming more!
Kidspod is a post site which supports young programmers.
First step to join us.
Register as a member
For members

2022/10/30 15:36:12

MixJuice GET URL : kidspod.club/mj/2140

電卓自作 htmlとjavascript使用

htmlとjavascriptで作りました。

  • 1
  • 2
  • 1
  • 2

SOURCE CODE

  1. htmlのコード
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <meta charset="UTF-8">
  7.     <title>電卓</title>
  8.   </head>
  9.   <body>
  10.     <script src="main.js"></script>
  11.     <link rel="stylesheet" href="style.css">
  12.     <input type="text" id="text01" readonly><br>
  13.     <input type="button" value="7" onclick="disp(7)"/>
  14.     <input type="button" value="8" onclick="disp(8)"/>
  15.     <input type="button" value="9" onclick="disp(9)"/>
  16.     <input type="button" value="/" onclick="waru()">
  17.     <input type="button" value="(" onclick="kah()"><br>
  18.     <input type="button" value="4" onclick="disp(4)"/>
  19.     <input type="button" value="5" onclick="disp(5)"/>
  20.     <input type="button" value="6" onclick="disp(6)"/>
  21.     <input type="button" value="*" onclick="kake()">
  22.     <input type="button" value=")" onclick="kao()"><br>
  23.     <input type="button" value="1" onclick="disp(1)"/>
  24.     <input type="button" value="2" onclick="disp(2)"/>
  25.     <input type="button" value="3" onclick="disp(3)"/>
  26.     <input type="button" value="-" onclick="hiki()">
  27.     <input type="button" value="%" onclick="pa()"><br>
  28.     <input type="button" value="0" onclick="disp(0)"/>
  29.     <input type="button" value="." onclick="ten()"/>
  30.     <input type="button" value="=" onclick="ikl()">
  31.     <input type="button" value="+" onclick="tasi()">
  32.     <input type="button" value="c" onclick="c()">   
  33.   </body>
  34. </html>
  35.  
  36. javascriptのコード
  37.  
  38. let a = 0;
  39. function disp(n){
  40.   let obj = document.getElementById("text01");
  41.   obj.value += n;
  42. }
  43. function hiki(){
  44.   obj = document.getElementById("text01");
  45.   obj.value += "-";
  46. }
  47. function waru(){
  48.   obj = document.getElementById("text01");
  49.   obj.value += "/";
  50. }
  51. function kake(){
  52.   obj = document.getElementById("text01");
  53.   obj.value += "*";
  54. }
  55. function tasi(){
  56.   obj = document.getElementById("text01");
  57.   obj.value += "+";
  58. }
  59. function ikl(){
  60.   obj = document.getElementById("text01");
  61.   obj.value = eval(obj.value);
  62. }
  63. function c(){
  64.   obj = document.getElementById("text01");
  65.   obj.value = "";
  66. }
  67. function ten(){
  68.   obj = document.getElementById("text01");
  69.   obj.value += ".";
  70. }
  71. function kah(){
  72.   obj = document.getElementById("text01");
  73.   obj.value += "(";
  74. }
  75. function kao(){
  76.   obj = document.getElementById("text01");
  77.   obj.value += ")";
  78. }
  79. function pa(){
  80.   obj = document.getElementById("text01");
  81.   obj.value += "%"
  82. }

COMMENT

Kidspod運営チーム
Kidspod運営チーム2022/11/07 18:03:12

おおー、いいですね。しっかり電卓。自分で関数を作ったり、document.getElementByIdしたり、色々やってますね！　ちょっとだけ注意点を言うと「<input id="text01">」には「readonly」属性を付けるのが良いでしょう。そうしないと、ユーザが勝手にjavascriptのコードを書き込んで実行できてしまいます。そうすると、想像していなかったことが起きてしまうかも。

S