JSFiddle - React, Tailwind, and code Playground

by wjddyd66

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
미니계산기
<br><br>
<table class="table">
<tbody>
  <tr>
    <td>숫자1:</td>
    <td><input type="text" id="num1"></td>
  </tr>
  
  <tr>
    <td>숫자2:</td>
    <td><input type="text" id="num2"></td>
  </tr>
  
  <tr>
    <td>연산선택:</td>
    <td>+<input type="radio" name="radioCalc" value="+">
    -<input type="radio" name="radioCalc" value="-">
    *<input type="radio" name="radioCalc" value="*">
    /<input type="radio" name="radioCalc" value="/"></td>
  </tr>

  <tr>
    <td>결과:</td>
    <td><input type="text" id="result"></td>
  </tr>
  
</tbody>

<tfoot>
<tr>
  <td><input type="button" value="계산" id="btnCalc"></td>
  <td><input type="button" value="초기화" id="btnReset"></td>
</tr>
</tfoot>

</table>

JavaScript

$("#btnCalc").click(function(){
		if($("#num1").val()==="" || $("#num2").val()===""){
			alert("숫자를 입력하세요.");
		} else if (isNaN($("#num1").val()) || isNaN($("#num2").val())){
			alert("문자는 입력 불가합니다.");
		} else {
			var num1=parseFloat($("#num1").val());
			var num2=parseFloat($("#num2").val());
    	
      var result=calc(num1, num2, $("input[name=radioCalc]:checked").val());
			$("#result").val(result)
		}
});
  
$("#btnReset").click(function(){
		del();
});

function calc(num1, num2, radioCalc){
	// alert(num1+", "+num2+", "+radioCalc);
	var result;
	switch (radioCalc) {
	case '+':
		result=num1+num2;
		break;
	case '-':
		result=num1-num2;
		break;
	case '*':
		result=num1*num2;
		break;
	case '/':
		result=num1/num2;
		break;
	}
	return result;
}

function del(){
	$("#num1").val("");
	$("#num2").val("");
	$("input[name=radioCalc]").removeAttr('checked');
	$("#result").val("")
}