press enter after carry input to check input

src/Addition.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import DataGrid, {Column} from "devextreme-react/data-grid";
 import {Alert} from "./AlertDialog.js";
-import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen} from "./helpers.js";
+import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen, handleKeyDown} from "./helpers.js";
 import "./App.css";
 
 let imdtRes;
@@ -32,7 +32,7 @@ function Addition() {
     setInput(e.target.value);
   }
 
-  const handleResChange = (e, nosLeft) => {
+  const handleResChange = (e) => {
     if(typeof e === "string"){
       imdtRes = e;
     }else{
@@ -48,22 +48,24 @@ function Addition() {
     }
   }
 
-  const handleCarryChange = (e, noOfDigits, nosLeft) => {
-    let carryArrCopy = [...carryArr];
-    carryArrCopy.unshift(e.target.value);
-    setCarryArr(carryArrCopy);
-    let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined
-
-    if((nosLeft === 1 && noCarry) ||
-       // if stop after first iteration, numbers left is undefined at first
-       (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
-      nosLeft = 0;
-      handleResChange(" ", 0)
-    }
+  const handleCarryChange = (e, nosLeft) => {
+    if(e.keyCode === 13){
+      let carryArrCopy = [...carryArr];
+      carryArrCopy.unshift(e.target.value);
+      setCarryArr(carryArrCopy);
+
+      let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined
+      if((nosLeft === 1 && noCarry) ||
+         // if stop after first iteration, numbers left is undefined at first
+         (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
+        nosLeft = 0;
+        handleResChange(" ")
+      }
 
-    if(nosLeft === 0){
-      createIdmtResults()
-      setShowAlert(true);
+      if(nosLeft === 0){
+        createIdmtResults();
+        setShowAlert(true);
+      }
     }
   }
 
@@ -79,7 +81,7 @@ function Addition() {
       let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
       realRes = parseFloat(realRes.toFixed(afterComma));
       setRealResult(realRes);
-      console.log("real result: ", realRes);
+      console.log("real result:", realRes);
 
       let [numbersArr, commaIdx] = numbersToArrOfArr(numbers);
       setNumbers(numbersArr);
@@ -106,7 +108,7 @@ function Addition() {
       // skip over comma
       if(imdtResIdx === commaIdx){
         if(!resArr.includes(".")){
-          handleResChange(".", nosLeft);
+          handleResChange(".");
         }
         imdtResIdx = imdtResIdx - 1;
         nosLeft = nosLeft - 1;
@@ -146,7 +148,8 @@ function Addition() {
             {labelText}
           </label>
           <input
-            onChange={(e) => handleResChange(e, nosLeft)}
+            onKeyDown={(e) => handleKeyDown(e)}
+            onChange={(e) => handleResChange(e)}
             type="text" id="input_result" size="2" maxLength="1"
             aria-labelledby="input_result_label" aria-required="true"
             ref={resInputField} autoFocus/>
@@ -155,7 +158,7 @@ function Addition() {
             {carryText}
           </label>
           <input
-            onChange={(e) => handleCarryChange(e, noOfDigits, nosLeft)}
+            onKeyDown={(e) => handleCarryChange(e, nosLeft)}
             type="text" id="input_carry" size="2" maxLength="1"
             aria-labelledby="input_carry_label" aria-required="true"
             ref={carryInputField}/>
@@ -171,27 +174,30 @@ function Addition() {
 
   const addButtonsToImdtSteps = () => {
     if(stepsGrid[0]["step"]!==""){
-      let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
-      let trs = table.getElementsByTagName("tr");
-      for(let trIdx in trs){
-        let tr = trs[trIdx];
-        if(tr instanceof HTMLElement && trIdx < trs.length-1){
-          let td = tr.getElementsByTagName("td")[0];
-          let btn = document.createElement("button");
-          btn.innerHTML = "hier starten";
-          btn.classList = "btn btn-secondary btn-sm";
-          btn.id = "btn-" + trIdx;
-          btn.addEventListener("click", () => startOver(trIdx));
-          td.appendChild(btn);
+      // workaround to access DOM td after grid values are set
+      setTimeout(() => {
+        let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
+        let trs = table.getElementsByTagName("tr");
+        for(let trIdx in trs){
+          let tr = trs[trIdx];
+          if(tr instanceof HTMLElement && trIdx < trs.length-1){
+            let td = tr.getElementsByTagName("td")[0];
+            let btn = document.createElement("button");
+            btn.innerHTML = "hier starten";
+            btn.classList = "btn btn-secondary btn-sm";
+            btn.id = "btn-" + trIdx;
+            btn.addEventListener("click", () => startOver(trIdx));
+            td.appendChild(btn);
+          }
         }
-      }
+      }, 100);
     }
   }
 
   const showIdmtResults = () => {
     setShowAlert(false);
     document.getElementById("idmtResultSteps").style.display = "inline-block";
-    addButtonsToImdtSteps()
+    addButtonsToImdtSteps();
   }
 
   const createIdmtResults = () => {

src/Subtraction.js

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useRef} from "react";
 import DataGrid, {Column} from "devextreme-react/data-grid";
 import {Alert} from "./AlertDialog.js";
-import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen} from "./helpers.js";
+import {addNumbersToGrid, numbersToArrOfArr, afterCommaLen, handleKeyDown} from "./helpers.js";
 import "./App.css";
 
 let imdtRes;
@@ -32,7 +32,7 @@ function Subtraction() {
     setInput(e.target.value);
   }
 
-  const handleResChange = (e, nosLeft) => {
+  const handleResChange = (e) => {
     if(typeof e === "string"){
       imdtRes = e;
     }else{
@@ -48,22 +48,24 @@ function Subtraction() {
     }
   }
 
-  const handleCarryChange = (e, noOfDigits, nosLeft) => {
-    let carryArrCopy = [...carryArr];
-    carryArrCopy.unshift(e.target.value);
-    setCarryArr(carryArrCopy);
-    let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined;
-
-    if((nosLeft === 1 && noCarry) ||
-       // if stop after first iteration, numbers left is undefined at first
-       (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
-      nosLeft = 0;
-      handleResChange(" ", 0)
-    }
+  const handleCarryChange = (e, nosLeft) => {
+    if(e.keyCode === 13){
+      let carryArrCopy = [...carryArr];
+      carryArrCopy.unshift(e.target.value);
+      setCarryArr(carryArrCopy);
+
+      let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined;
+      if((nosLeft === 1 && noCarry) ||
+         // if stop after first iteration, numbers left is undefined at first
+         (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
+        nosLeft = 0;
+        handleResChange(" ")
+      }
 
-    if(nosLeft === 0){
-      createIdmtResults()
-      setShowAlert(true);
+      if(nosLeft === 0){
+        createIdmtResults()
+        setShowAlert(true);
+      }
     }
   }
 
@@ -83,7 +85,7 @@ function Subtraction() {
       let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
       realRes = parseFloat(realRes.toFixed(afterComma));
       setRealResult(realRes);
-      console.log("real result: ", realRes);
+      console.log("real result:", realRes);
 
       let [numbersArr, commaIdx] = numbersToArrOfArr(numbers);
       setNumbers(numbersArr);
@@ -112,7 +114,7 @@ function Subtraction() {
       // skip over comma
       if(imdtResIdx === commaIdx){
         if(!resArr.includes(".")){
-          handleResChange(".", nosLeft);
+          handleResChange(".");
         }
         imdtResIdx = imdtResIdx - 1;
         nosLeft = nosLeft - 1;
@@ -165,7 +167,8 @@ function Subtraction() {
             {labelText}
           </label>
           <input
-            onChange={(e) => handleResChange(e, nosLeft)}
+            onKeyDown={(e) => handleKeyDown(e)}
+            onChange={(e) => handleResChange(e)}
             type="text" id="input_result" size="2" maxLength="1"
             aria-labelledby="input_result_label" aria-required="true"
             ref={resInputField} autoFocus/>
@@ -174,7 +177,7 @@ function Subtraction() {
             {carryText}
           </label>
           <input
-            onChange={(e) => handleCarryChange(e, noOfDigits, nosLeft)}
+            onKeyDown={(e) => handleCarryChange(e, nosLeft)}
             type="text" id="input_carry" size="2" maxLength="1"
             aria-labelledby="input_carry_label" aria-required="true"
             ref={carryInputField}/>
@@ -190,27 +193,30 @@ function Subtraction() {
 
   const addButtonsToImdtSteps = () => {
     if(stepsGrid[0]["step"]!==""){
-      let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
-      let trs = table.getElementsByTagName("tr");
-      for(let trIdx in trs){
-        let tr = trs[trIdx];
-        if(tr instanceof HTMLElement && trIdx < trs.length-1){
-          let td = tr.getElementsByTagName("td")[0];
-          let btn = document.createElement("button");
-          btn.innerHTML = "hier starten";
-          btn.classList = "btn btn-secondary btn-sm";
-          btn.id = "btn-" + trIdx;
-          btn.addEventListener("click", () => startOver(trIdx));
-          td.appendChild(btn);
+      // workaround to access DOM td after grid values are set
+      setTimeout(() => {
+        let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
+        let trs = table.getElementsByTagName("tr");
+        for(let trIdx in trs){
+          let tr = trs[trIdx];
+          if(tr instanceof HTMLElement && trIdx < trs.length-1){
+            let td = tr.getElementsByTagName("td")[0];
+            let btn = document.createElement("button");
+            btn.innerHTML = "hier starten";
+            btn.classList = "btn btn-secondary btn-sm";
+            btn.id = "btn-" + trIdx;
+            btn.addEventListener("click", () => startOver(trIdx));
+            td.appendChild(btn);
+          }
         }
-      }
+      }, 100);
     }
   }
 
   const showIdmtResults = () => {
     setShowAlert(false);
     document.getElementById("idmtResultSteps").style.display = "inline-block";
-    addButtonsToImdtSteps()
+    addButtonsToImdtSteps();
   }
 
   const createIdmtResults = () => {

src/helpers.js

@@ -1,4 +1,11 @@
- export const addNumbersToGrid = (numbersArr, sign) => {
+
+export const handleKeyDown = (e) => {
+  if(e.keyCode === 13){
+    document.getElementById("input_carry").focus();
+  }
+}
+
+export const addNumbersToGrid = (numbersArr, sign) => {
   const nrGrid = []
   for (let noIdx in numbersArr){
     let nr = numbersArr[noIdx].join("").replace(/ /g, " ");