htmlでセルの値を取得して計算する方法が知りたいです。

HTML超初心者です。
宜しくお願いします。

<td><input name="始業時間" value="8:30" type="time">
</td>
<td> <input name="終了時間" value="17:15" type="time">
</td>
<td>
<form onsubmit="return false" id="就労時間" oninput="result.value = time(終了時間.value) - time(始業時間.value);">
</form>
<output name="result" form="就労時間">0</output></td>
<td><br>

上記は勤怠の始業時間と終了時間の入力値から、就労時間を計算して表示する様に私が書いたのですが、うまく行きません。

就労時間は7.5（時間）の様に時間で出したいです。

どうすれば始業時間と終了時間の入力値から、就労時間を計算して時間表示出来るようになるか、
どなたかご教授頂けないでしょうか？

宜しくお願いします。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2021/05/27 14:12

<form name=work>

休憩: <input name=rest type=number value="1.25" step="0.01" required><br>
<input name=a type=time value="08:30" required> -
<input name=b type=time value="17:15" required>
<button type=submit>計算</button> → <output name=n></output>
</form>
<script>
window.addEventListener('submit', function(ev){
var form = ev.target;
if (form.name != 'work') return; // 目的外のフォームを除外
ev.preventDefault(); // 送信させない
var f = (n) => form.elements[n].valueAsNumber;
var h = (f('b') - f('a')) / (1000*60*60) - f('rest');
form.elements['n'].value = h.toFixed(2) + "時間";
});
</script>

この回答へのお礼

ありがとうございます！
大変助かりました。

早速表に埋め込んで表を作成しました。
まだ、1行目しかちゃんと動作しませんが、頑張って2行目以降も作成してみます。

最終的には31日分作ります。

また分からないことが有りましたら、宜しくお願いします。
感謝です！

お礼日時：2021/05/31 12:07