[第十七天] 牛刀小試-簡易計算機

2024 iThome 鐵人賽

DAY 17

自我挑戰組

認識JavaScript系列第 17 篇

16th鐵人賽

IRENE

2024-10-01 23:54:21

63 瀏覽

分享至

嘗試寫寫計算機的功能。

<html>
  <body>
    <div style="text-align: center">簡易計算機</div>
    <table align="center">
      <tr>
        <th colspan=4><input value=0 style="text-align: right" id="result"/></th>
      </tr>
      <tr>
        <th colspan=3><button data-operator="AC">AC</button></th>
        <th><button data-operator="÷">÷</button></th>
      </tr>
      <tr>
        <th><button data-number="7">7</button></th>
        <th><button data-number="8">8</button></th>
        <th><button data-number="9">9</button></th>
        <th><button data-operator="×">×</button></th>
      </tr>
      <tr>
        <th><button data-number="4">4</button></th>
        <th><button data-number="5">5</button></th>
        <th><button data-number="6">6</button></th>
        <th><button data-operator="－">－</button></th>
      </tr>
      <tr>
        <th><button data-number="1">1</button></th>
        <th><button data-number="2">2</button></th>
        <th><button data-number="3">3</button></th>
        <th><button data-operator="＋">＋</button></th>
      </tr>
      <tr>
        <th colspan=2><button data-number="0">0</button></th>
        <th><button data-number=".">.</button></th>
        <th><button data-operator="＝">＝</button>
      </tr>
    </table>
  </body>
</html>

十分陽春，完全沒有美化的畫面，拉好啦。

const numberButtons = document.querySelectorAll('button[data-number]');
const operatorButtons = document.querySelectorAll('button[data-operator]');
let clicknum = 0;
let b4value = null;
let l8value = null;
let exeoperator = null;

function handleNumberClick(event) {
    const number = event.target.getAttribute('data-number');
    const result = document.getElementById("result").value;
    const reDot = /[.]/;
    
    if (number == "."){
    	if (result.search(reDot) >= 0){
      	return;
      }
      else{
      	document.getElementById("result").value = result.padEnd(result.length + 1, number);
      }
    }
    
    if (result == 0){
    	document.getElementById("result").value = number;
    }
    else{
    	document.getElementById("result").value = result.padEnd(result.length + 1, number);
    }
}

function handleOperatorClick(event) {
    const operator = event.target.getAttribute('data-operator');
    const result = document.getElementById("result").value;
    let operatorSymbol;
    if (operator == "AC"){
    	cleanvalue();
      document.getElementById("result").value = 0;
      return;
    }
    if (clicknum > 0){
    	l8value = result;
    	calculate();
      result = document.getElementById("result").value;
    	switch (operator) {
        case '＋':
        case '-':
        case '×':
        case '÷':
          b4value = result;
          exeoperator = operator;
          clicknum ++;
          break;
        case '＝':
        	calculate();
          break;
    }
    console.log('你選擇了運算符: ' + operatorSymbol);
    }
    else{
    	b4value = result;
      exeoperator = operator;
      console.log('b4value: ' + b4value);
      document.getElementById("result").value = 0;
    	clicknum ++;
    }
}

function calculate() {
	let r;
	switch (exeoperator) {
  	case '＋':
    	r = parseFloat(b4value) + parseFloat(l8value);
      document.getElementById("result").value = r.toString();
      break;
		case '－':
			r = parseFloat(b4value) - parseFloat(l8value);
      document.getElementById("result").value = r.toString();
      break;
		case '×':
      r = parseFloat(b4value) * parseFloat(l8value);
      document.getElementById("result").value = r.toString();
      break;
		case '÷':
      r = parseFloat(b4value) / parseFloat(l8value);
      document.getElementById("result").value = r.toString();
      break;
	}
  cleanvalue();
}

function cleanvalue(){
	b4value = null;
  l8value = null;
  exeoperator = null;
  clicknum = 0;
}

numberButtons.forEach(button => {
    button.addEventListener('click', handleNumberClick);
});

operatorButtons.forEach(button => {
    button.addEventListener('click', handleOperatorClick);
});