JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<table>
  <tr>
    <th></th>
    <th>平米数(㎡)</th>    
    <th class="result">坪数</th>
    <th>坪単価(円/坪)</th>
    <th class="result">金額(円)</th>
  </tr>

　<tr>
　　<td><input type="text" name="se01_a" value=""></td>
　　<td><input type="text" name="se01_b" value="" id="se01_b"></td>
　　<td class="result"><span id="tsubo"></span></td>
　　<td><input type="text" name="se01_c" value="" id="se01_c"></td>
　　<td class="result"><span id="kingaku"></span></td>
　</tr>
</table>

CSS

table, th, td { border: solid 1px #000000; border-collapse: collapse; }

th { background-color: #aaa; }
th.result { width: 150px; }
td { padding: 5px; }
td.result { text-align: right; }
input { font-size: 16pt; }

input { width: 100px; }
input[name=se01_a] { width: 30px; }

input.error { background-color: #dc143c; }

JavaScript

var inputs = document.getElementsByTagName('input');

for (var i=0; i < inputs.length; i ++ ) {
  inputs[i].addEventListener('input', inputHandler);
}

function inputHandler(e) {
   var value = 0;

   switch(e.target.id) {
     case 'se01_b':
       e.target.value = e.target.value.replace(/[^0-9.]/,'');
       if (/^[0-9]*(\.[0-9]*)?$/.test(e.target.value)) {
         value = Number(e.target.value);
         e.target.className = '';
         price({ se01_b: value });
       } else {
         e.target.className = 'error';
         document.getElementById('tsubo').innerHTML = '';
       }
       break;
     case 'se01_c':
       value = Number(e.target.value.replace(/[^0-9]/g,''));
       e.target.value = value > 0 ? value.toLocaleString('ja-JP') : '';
       price({ se01_c: value });
       break;
     default:
       break;
   }  
}

function price({se01_b, se01_c}) {
    
    se01_b = (se01_b >= 0 ? se01_b : Number(document.getElementById('se01_b').value));
    se01_c = (se01_c >= 0 ? se01_c : Number(document.getElementById('se01_c').value.replace(/[^0-9]/g,'')));
            
    var tsubo = se01_b * 0.3025;
    var kingaku = tsubo * se01_c;
    
    tsubo = Math.floor(tsubo * 100.0) / 100.0;  // 少数点第3位以下を切り捨て
      
    document.getElementById('tsubo').innerHTML = (tsubo > 0 ? `<b>${tsubo} 坪</b>` : '');
    document.getElementById('kingaku').innerHTML =  (kingaku > 0 ? `<b>${kingaku.toLocaleString('ja-JP')} 円</b>` : "");
}