JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form name="price_form">
  se01_b:<input id="se01_b"><br />
  se01_c:<input id="se01_c"><br />
</form>
<hr />
tsubo: <span id="tsubo"></span>
<br />
kingaku: <span id="kingaku" ></span>

JavaScript

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

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

function inputHandler(e) {
   var value = Number(e.target.value.replace(/[^0-9]/g,''));

   if (e.target.id === 'se01_c') {
     e.target.value = value > 0 ? value.toLocaleString('ja-JP') : '';
     price(NaN, value);
   } else {
     e.target.value = value > 0 ? value : '';
     price(value, NaN);
   }   
}

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;
      
    document.getElementById('tsubo').innerHTML = (tsubo || '');
    document.getElementById('kingaku').innerHTML =  (kingaku > 0 ? kingaku.toLocaleString('ja-JP') : "");
}