前提
初心者です。
【未解決】
現在、Spring Bootを用いて、電卓(画面上の数字ボタンを押して数字を入力、演算子ボタンを押して四則演算を行う)を作成しているのですが、「画面(HTML)上の数字ボタンを押下後、画面に数字が入力する方法」
【未解決】
「"=(イコール)ボタン"を押下後に、結果(Total)を算出する方法」が調べてもわからなかったので、ご教授お願いいたします。
引用テキスト~~### 実現したいこと
・【電卓の流れ】:数字ボタン押下で数字を入力(calculator.htmlのname="display"に表示)
→演算子ボタン押下で四則演算子入力
→数字ボタン押下で数字を入力(画面に表示)
→"=(イコール)ボタン"を押下後に、結果(Total)を算出、表示
・画面(calculator.html)上の数字ボタンを押下後、画面(calculator.htmlのname="display")に数字が入力される
・"=(イコール)ボタン"を押下後に、結果(Total)を算出される
該当のソースコード
CalculatorController.java
1package com.example.demo.controller; 2 3import org.springframework.beans.factory.annotation.Autowired; 4import org.springframework.stereotype.Controller; 5import org.springframework.ui.Model; 6import org.springframework.web.bind.annotation.ModelAttribute; 7import org.springframework.web.bind.annotation.RequestMapping; 8import org.springframework.web.bind.annotation.RequestMethod; 9 10import com.example.demo.model.OperationModel; 11import com.example.demo.service.CalculatorService; 12 13@Controller 14public class CalculatorController { 15 16 OperationModel operationModel = new OperationModel(); 17 18 @Autowired 19 private CalculatorService calculatorService; 20 21 @RequestMapping("/calculator") 22 public String getCalculatorPage(Model model) { 23 model.addAttribute("operationModel", operationModel); 24 return "calculator"; 25 } 26 27//「数字ボタン押下」時、 28 if (req.getParameter("num") != null) { 29 //「初期フラグ(initialFlag)がtrue」かつ「今入力値(num1)がnull」の場合、 30 if (operationModel.getInitialFlag() && operationModel.getNum1() == null) { 31 System.out.println(operationModel.getInitialFlag()); 32 System.out.println(operationModel.getNum1()); 33 //今入力値に数字ボタン値("num")を代入する。 34 operationModel.setNum1(Integer.parseInt(req.getParameter("num"))); 35 System.out.println(operationModel.getNum1()); 36 //初期フラグをfalseにする。 37 operationModel.setInitialFlag(false); 38 System.out.println(operationModel.getInitialFlag()); 39 model.addAttribute("inputNum1", operationModel.getNum1()); 40 41 //「初期フラグがfalse」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、 42 } else if (!operationModel.getInitialFlag() && operationModel.getNum1() != null) { 43 //押下した数字ボタン値を今入力値の後に追加して、画面に表示 44 model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num"))); 45 46 //「初期フラグがtrue」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、 47 } else if (operationModel.getInitialFlag() && operationModel.getNum1() != null) { 48 //押下した数字ボタン値を今入力値の後に追加して、画面に表示 49 model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num"))); 50 } 51 52 //「イコールボタン("=")押下」時、 53 } else if (req.getParameter("equal") != null) { 54 operationModel.setInitialFlag(true); //<イコールボタン(=)押下時の命令> 55 } 56 57 return "calculator"; 58 }*/
CalculatorService.java
1package com.example.demo.service; 2 3import org.springframework.stereotype.Service; 4 5import com.example.demo.model.OperationModel; 6 7@Service 8public class CalculatorService { 9 10 public int add(OperationModel model) { 11 return model.getNum1() + model.getNum2(); 12 } 13 14 public int subtract(OperationModel model) { 15 return model.getNum1() - model.getNum2(); 16 } 17 18 public int multiply(OperationModel model) { 19 return model.getNum1() * model.getNum2(); 20 } 21 22 public double divide(OperationModel model) { 23 if (model.getNum1() == 0) 24 return 0; 25 if (model.getNum2() == 0) 26 return 0; 27 return (double) model.getNum1() / model.getNum2(); 28 } 29 30 public OperationModel clear(OperationModel model) { 31 model.setNum1(0); 32 model.setNum2(0); 33 return model; 34 } 35 36}
OperationModel
1package com.example.demo.model; 2 3public class OperationModel { 4 private String operation; 5 private Integer num1 = null ; 6 private int num2; 7 private boolean initialFlag = true; 8 9 public OperationModel() { 10 } 11 12 public OperationModel(String operation) { 13 this.operation = operation; 14 } 15 16 public OperationModel(Integer num1, int num2) { 17 this.num1 = num1; 18 this.num2 = num2; 19 } 20 21 public String getOperation() { 22 return operation; 23 } 24 25 public void setOperation(String operation) { 26 this.operation = operation; 27 } 28 29 public Integer getNum1() { 30 return num1; 31 } 32 33 public void setNum1(Integer num1) { 34 this.num1 = num1; 35 } 36 37 public int getNum2() { 38 return num2; 39 } 40 41 public void setNum2(int num2) { 42 this.num2 = num2; 43 } 44 45public boolean isInitialFlag() { 46 return initialFlag; 47 } 48 49 public void setInitialFlag(boolean initialFlag) { 50 this.initialFlag = initialFlag; 51 } 52 53}
calculator.html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<link href="style.css" th:href="@{style.css}" rel="stylesheet"> 6</head> 7<body> 8<form action="#" th:action="@{/calculator}" th:object="${operationModel}" method="POST"> 9<table> 10<!-- 液晶画面部分 --><!-- ・colspan:セルの結合 ・disabled:入力不可 --> 11<tr> 12<td colspan="4"> 13<input type="text" class="display" name="display" th:value="${inputNum1}" disabled> 14 15 <!-- <input type="hidden" th:field="*{前入力数値}" class="display" name="display" value="" > 16 <input type="hidden" th:field="*{前入力演算子}" class="display" name="display" value="" > 17 <input type="hidden" th:field="*{今入力演算子}" class="display" name="display" value="" > 18 <input type="hidden" th:field="*{初期入力フラグ}" class="display" name="display" value="" > --> 19</td> 20</tr> 21 22<!-- 上から1段目(7~9+÷) --><!-- ・value:入力フィールドの初期値設定 ・onclick:要素押下(クリック)時の起動処理--> 23<tr> 24<td><input type="submit" value="7" name="num" ></td> 25<td><input type="submit" value="8" name="num" ></td> 26<td><input type="submit" value="9" name="num" ></td> 27<td><input type="submit" value="÷" class="operator" name="divide"></td> 28</tr> 29 30<!-- 上から2段目(4~6+×) --> 31<tr> 32<td><input type="submit" value="4" name="num" ></td> 33<td><input type="submit" value="5" name="num" ></td> 34<td><input type="submit" value="6" name="num" ></td> 35<td><input type="submit" value="×" class="operator" name="multiply"></td> 36</tr> 37 38<!-- 上から3段目(1~3+-) --> 39<tr> 40<td><input type="submit" value="1" name="num" ></td> 41<td><input type="submit" value="2" name="num" ></td> 42<td><input type="submit" value="3" name="num" ></td> 43<td><input type="submit" value="-" class="operator" name="subtract"></td> 44</tr> 45 46<!-- 上から4段目(0/C/=/+) --> 47<tr> 48<td><input type="submit" value="0" name="num" ></td> 49<td><input type="submit" value="C" name="clearSimple" ></td> 50<td><input type="submit" value="=" class="equal" ></td> 51<td><input type="submit" value="+" class="operator" name="add"></td> 52</tr> 53 54</table> 55 56<h1> 57<p th:text="'inputNum: ' + ${inputNum}" /> 58</h1> 59 60<h1> 61<p th:text="'result: ' + ${result}" /> 62</h1> 63 64</form> 65</body> 66</html>
試したこと
calculator.htmlに以下を適用できるようにはできました。
<input type="text" th:field="*{Num1}" /> <input type="text" th:field="*{Num2}" />にテキスト形式で数字(Num1, Num2)を入力、演算子ボタンを押下後、<p th:text="'result: ' + ${result}" />に結果が表示
補足情報(FW/ツールのバージョンなど)
開発環境:eclipse
javaVersion = 17
springBootVersion = 2.7.4
あなたの回答
tips
プレビュー