JSFiddle - React, Tailwind, and code Playground

by Sure Sure

HTML

【Input】<br>
<table border="0" cellpadding="2" cellspacing="2">
<thead><tr bgcolor="seagreen">
<td>項目名</td>
<td>Unit1</td>
<td>Unit2</td>
<td>Unit3</td>
<td>Unit4</td>
<td>Unit5</td>
<td>Unit6</td>
</tr></thead>
<tr>
<td>ユニット攻撃力</td>
<td><INPUT TYPE="text" id="base_atk1" VALUE="10000" SIZE=5/></td>
<td><INPUT TYPE="text" id="base_atk2" VALUE="10000" SIZE=5/></td>
<td><INPUT TYPE="text" id="base_atk3" VALUE="10000" SIZE=5/></td>
<td><INPUT TYPE="text" id="base_atk4" VALUE="10000" SIZE=5/></td>
<td><INPUT TYPE="text" id="base_atk5" VALUE="10000" SIZE=5/></td>
<td><INPUT TYPE="text" id="base_atk6" VALUE="10000" SIZE=5/></td>
</tr>
<tr>
<td>攻撃力ボーナス</td>
<td><INPUT TYPE="text" id="bonus_atk1" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_atk2" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_atk3" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_atk4" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_atk5" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_atk6" VALUE="0" SIZE=5/></td>
</tr>
<tr>
<td>特化ダメージ</td>
<td><INPUT TYPE="text" id="bonus_dmg1" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_dmg2" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_dmg3" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_dmg4" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_dmg5" VALUE="0" SIZE=5/></td>
<td><INPUT TYPE="text" id="bonus_dmg6" VALUE="0" SIZE=5/></td>
</tr>
<tr>
<td>アサルト補正率</td>
<td><INPUT TYPE="text" id="assault_rate1" VALUE="0.10" SIZE=5/></td>
<td><INPUT TYPE="text" id="assault_rate2" VALUE="0.10" SIZE=5/></td>
<td><INPUT TYPE="text" id="assault_rate3" VALUE="0.10" SIZE=5/></td>
<td><INPUT TYPE="text" id="assault_rate4" VALUE="0.10" SIZE=5/></td>
<td><INPUT TYPE="text" id="assault_rate5" VALUE="0.10" SIZE=5/></td>
<td><INPUT TYPE="text" id="assault_rate6" VALUE="0.10" SIZE=5/></td>
</tr>
<tr>
<td>全力補正率</td>
<td><INPUT TYPE="text" id="full_rate1" VALUE="0.15" SIZE=5/></td>
<td><INPUT TYPE="text"...

CSS

thead {
  color:white;
  font-size:small;
  text-align:center;
  font-size:x-small;
  }
td {
  font-size:x-small;
  }
input {
  text-align:right;
  font-size:x-small;
  }
p {
  font-size:x-small;
  }

JavaScript

function calc(ch) {
	if(ch == "calc"){
		//入力値読込み
	  //整数型は整数型に
	  //小数型は5桁切上げに
		//ユニット攻撃力
		var base_atk = [
    	parseInt(document.getElementById('base_atk1').value),
    	parseInt(document.getElementById('base_atk2').value),
    	parseInt(document.getElementById('base_atk3').value),
    	parseInt(document.getElementById('base_atk4').value),
    	parseInt(document.getElementById('base_atk5').value),
    	parseInt(document.getElementById('base_atk6').value)
      ];
		//攻撃力ボーナス
			var bonus_atk = [
    	parseInt(document.getElementById('bonus_atk1').value),
    	parseInt(document.getElementById('bonus_atk2').value),
    	parseInt(document.getElementById('bonus_atk3').value),
    	parseInt(document.getElementById('bonus_atk4').value),
    	parseInt(document.getElementById('bonus_atk5').value),
    	parseInt(document.getElementById('bonus_atk6').value)
      ];
		//特化ダメージ
		var bonus_dmg = [
    	parseInt(document.getElementById('bonus_dmg1').value),
    	parseInt(document.getElementById('bonus_dmg2').value),
    	parseInt(document.getElementById('bonus_dmg3').value),
    	parseInt(document.getElementById('bonus_dmg4').value),
    	parseInt(document.getElementById('bonus_dmg5').value),
    	parseInt(document.getElementById('bonus_dmg6').value)
      ];
		//アサルト補正率
		var assault_rate = [
    	(parseFloat(document.getElementById('assault_rate1').value)*100000+0.5)/100000,
    	(parseFloat(document.getElementById('assault_rate2').value)*100000+0.5)/100000,
    	(parseFloat(document.getElementById('assault_rate3').value)*100000+0.5)/100000,
    	(parseFloat(document.getElementById('assault_rate4').value)*100000+0.5)/100000,
    	(parseFloat(document.getElementById('assault_rate5').value)*100000+0.5)/100000,
    	(parseFloat(document.getElementById('assault_rate6').value)*100000+0.5)/100000
      ];
		//全力補正率
		var full_rate = [
    	(parseFloat(document.getElementById('full_rate1').value)*100000+0.5)/100000,
   ...