現象
JavaScriptで適正体重(身長(m)の2乗×22で求める)を算出したいが、index.htmlから入力した身長(m)を入力しても何も起こらない。consoleにはエラーが出現する。
期待値
入力フォームに身長(m)を入力したら、適正体重が表示されること。
再現手順
下記のコードを実行する。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>適正体重を身長(m)の2乗×22で求める</title>
</head>
<body>
身長(m):<input type="number" step="0.01"><br>
<input type="submit" value="送信" id="calculation">
適正体重(kg):<p id="result"></p>
<script type="text/javascript" src="calculation.js"></script>
</body>
</html>
calculation.js
'use strict';
var calclation=document.getElementById('caluclation');
calclation.addEventListener('submit', (e) =>{
var eleHeight=document.getElementById("height");
function calc() {
var height=parseFloat(eleHeight.value);
var heightSquared=Math.pow(height, 2);
var appropriateWeight=heightSquared*22;
};
console.log(appropriateWeight);
var result=appropriateWeight;
result.innerHTML="appropriateWeight";
});
補足
入力する身長は「センチメートル」ではなく「メートル」です。
submit
イベントはform
要素で発生します。 HTMLFormElement: submit イベント - Web API | MDN から: 「submit イベントは <form> 要素自身で発生するものであり、その中の <button> や <input type="submit"> で発生するものではないことに注意してください。」