<script>
window.addEventListener('load', () => {
  const denier   = document.getElementById('jsNum'); // デニール
  const density  = document.querySelector('select[name=density]'); // 密度
  const diameter = document.getElementById('jsPrice'); // 繊維径

  const baseNum  = 11.9; // 定数
  const calcDiameter = num => baseNum * Math.sqrt(num / density.value); // 数式設定

  // デニール入力確定で繊維径を出力
  denier.addEventListener('change', e => {
    diameter.value = (!e.target.value || e.target.value <= 0)? '': calcDiameter(Math.trunc(e.target.value));
  });
});
</script>

<div class="sample_wrap">
	<h1 class="sample_h1">デニールから繊維径への変換</h1>
	<p class="sample_p">デニールを入力すると繊維径を算出できます。</p>
	<form class="sample_form" method="post" action="">
		<table class="sample_table">
			<tbody><tr>
				<th class="sample_th">デニール[-]</th>
				<td class="sample_td"><input value="" name="textbox01" type="text" id="jsNum" class="sample_input"></td>
			</tr>
      <tr>
				<th class="sample_th">密度[kg/m3]</th>
				<td class="sample_td">
          <select name="density" onchange="">
            <option value="1.38" selected="">PET (密度: 1.38kg/m3)</option>
            <option value="0.98">PP (密度: 0.98kg/m3)</option>
          </select>
        </td>
			</tr>


			<tr>
				<th class="sample_th">繊維径[µm]</th>
				<td class="sample_td"><input value="" name="textbox03" type="text" id="jsPrice" class="sample_input" readonly=""></td>
			</tr>
		</tbody></table>
	</form>
</div>