現在電卓をjavascriptを用いて作成しているのですが、あるサイトを参考にしながら作成していたところ、そのサイトの中のコードでvar is_calc = false;を変数に定義して、コードを書いているのですが、なぜこれを使うと=で計算したかどうかになるのかが分かりません。
以下がコードになります。
分かりにくい質問かとは思いますがご回答のほどよろしくお願いします。
HTML
1<div class="wrapper"> 2 <h1 id="header">電卓</h1> 3 <div id="calc"> 4 <div> 5 <input readonly id="result" type="text" value="0"> 6 <button onclick="c_click()">C</button> 7 </div> 8 <div> 9 <button onclick="num_click(this.innerHTML)">7</button> 10 <button onclick="num_click(this.innerHTML)">8</button> 11 <button onclick="num_click(this.innerHTML)">9</button> 12 <button onclick="ope_click(this.innerHTML)">÷</button> 13 </div> 14 <div> 15 <button onclick="num_click(this.innerHTML)">4</button> 16 <button onclick="num_click(this.innerHTML)">5</button> 17 <button onclick="num_click(this.innerHTML)">6</button> 18 <button onclick="ope_click(this.innerHTML)">×</button> 19 </div> 20 <div> 21 <button onclick="num_click(this.innerHTML)">1</button> 22 <button onclick="num_click(this.innerHTML)">2</button> 23 <button onclick="num_click(this.innerHTML)">3</button> 24 <button onclick="ope_click(this.innerHTML)">-</button> 25 </div> 26 <div> 27 <button onclick="num_click(this.innerHTML)">0</button> 28 <button onclick="num_click(this.innerHTML)">.</button> 29 <button onclick="equal_click()">=</button> 30 <button onclick="ope_click(this.innerHTML)">+</button> 31 </div> 32 </div> 33</div>
CSS
1@charset "utf-8"; 2/*全体*/ 3.wrapper{ 4 max-width: 350px; 5 margin: 0 auto; 6 color: #666; 7} 8#header,#calc{ 9 box-sizing: border-box; 10 text-align: center; 11} 12/*ヘッダー*/ 13#header { 14 font-size: 24px; 15 padding: 1rem; 16} 17/*テキスト*/ 18input{ 19 box-sizing: border-box; 20 width: 75%; 21 height: 3.5rem; 22 font-size: 1.6rem; 23 text-align: right; 24 padding: 0 0.75rem; 25} 26/*ボタン関係*/ 27button{ 28 font-size: 18px; 29 width: 25%; 30 height: 3.5rem; 31 color: #333; 32 vertical-align: middle; 33 border-color: #fff; 34} 35button:hover{ 36 background-color: #ddd; 37}
javascript
1var result = ""; 2// =で計算したかどうか 3var is_calc = false; 4 5// 初期表示 6window.onload = function () { 7 result = document.getElementById('result'); 8}; 9 10// Cキー押下 11function c_click(){ 12 result.value = "0"; 13 is_calc = false; 14} 15 16// 数字キー押下 17function num_click(val){ 18 if(is_calc) result.value = "0"; 19 is_calc = false; 20 21 if(result.value =="0" && val == "0"){ 22 result.value = "0"; 23 }else if(result.value == "0" && val == "."){ 24 result.value = "0."; 25 }else if(result.value == "0"){ 26 result.value = val; 27 }else{ 28 result.value += val; 29 } 30} 31 32// 演算子キー押下 33function ope_click(val){ 34 if(is_calc) is_calc = false; 35 36 if(is_ope_last()){ 37 result.value = result.value.slice(0, -1) + val; 38 } else { 39 result.value += val; 40 } 41} 42 43// =キークリック 44function equal_click(){ 45 if(is_ope_last()) result.value = result.value.slice(0, -1); 46 47 var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))(); 48 if(temp == Infinity || Number.isNaN(temp)){ 49 result.value = "Error"; 50 }else{ 51 result.value = temp; 52 is_calc = true; 53 } 54} 55 56// 入力されている値が演算子かどうか 57function is_ope_last(){ 58 return ["+","-","×","÷"].includes(result.value.toString().slice(-1)); 59} 60
このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
回答3件
あなたの回答
tips
プレビュー