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 se01bInput = document.getElementById('se01_b');
var se01cInput = document.getElementById('se01_c');

se01bInput.addEventListener('input', function(e) {
  var value = Number(e.target.value.replace(/[^0-9]/g,''));
  se01bInput.value = isNaN(value) || !value ? "" : value;
  
  if (value > 0) 
    price(value, null);
  else
    clear();
});

se01cInput.addEventListener('input', function(e) {
  var value = Number(e.target.value.replace(/[^0-9]/g,''));
  se01cInput.value = isNaN(value) || !value ? "" : value.toLocaleString('ja-JP');
  
  if (value > 0) 
    price(null, value);
  else
    clear();
});

function price(se01_b, se01_c) {
    se01_b = se01_b || Number(se01bInput.value);
    se01_c = se01_c || Number(se01cInput.value.replace(/[^0-9]/g,''));
        
    var tsubo = se01_b * 0.3025;
    var kingaku = tsubo * se01_c;
    
    document.getElementById('tsubo').innerHTML = isNaN(tsubo) ? "" : tsubo;    
    document.getElementById('kingaku').innerHTML = isNaN(kingaku) ? "" : kingaku.toLocaleString('ja-JP');
}

function clear() {
    document.getElementById('tsubo').innerHTML = '';
    document.getElementById('kingaku').innerHTML = '';
}