<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="zenhyoji.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>受信HTML</title>
<script>
window.onload = function() {
// URLを取得
const url = new URL(window.location.href);
// URLSearchParamsオブジェクトを取得
const params = url.searchParams;
// パラメータから「username」を取得
let m = params.get("m");
let s = params.get("s");
let rid = params.get("id");
if(m == ''){
m = '0';
}
if(s == ''){
s = '0';
}
// IDを使ってspan要素を取得する
//const span1 = document.getElementById("receivedName1");
//const span2 = document.getElementById("receivedName2");
// const span3 = document.getElementById("receivedName3");
// 取得したspan要素に受け取ったパラメータを代入
// span1.innerText = m;
//span2.innerText = s;
//span3.innerText = rid;
const x = document.querySelector("#area1");
x.addEventListener("click",func1);
function func1() {
let kg = document.form1.taiju.value;
let mets;
let next;
if (rid == 'ude1'){
mets = 8.0;
next = '腕トレーニングLv.2へ進もう'
}
else if (rid == 'ude2'){
mets = 4.0;
next = '腕トレーニングLv.3へ進もう'
}
else if (rid == 'hara1'){
mets = 3.8;
next = '腹筋トレーニングLv.2へ進もう'
}
let h = (60*parseInt(m)+parseInt(s))/3600;
let kcal = mets*kg*roundFloat(h,5)*1.05;
const y =document.querySelector("#area2");
y.textContent ='消費カロリー：' + (mets*kg*roundFloat(h, 5)* 1.05).toFixed(3) + 'kcal';
const z =document.querySelector("#area3");
if(rid == 'ude1'){
z.textContent = "次は"+ next;
}
else if(rid == 'ude2'){
z.textContent = "次は"+ next;
}
else if(rid == 'hara1'){
z.textContent = "次は"+ next;
}
else if(rid == 'hara2'){
z.textContent = "次は"+ next;
}
}
}
function roundFloat( number, n ) {
var _pow = Math.pow( 10 , n );
return Math.round( number * _pow ) / _pow;
}
</script>
</head>
<body background="maintaiki.PNG">
<h2>あなたの体重を入力し、</h2>
<h2>計算ボタンを押してください。</h2>
<form name="form1" align = "center" >
<input type="number" name="taiju" align = "center" size = 5 >kg
<h2> </h2>
<!--<span id = "receivedName3" align = "center"></span>-->
<div>
<input type = "button" id ="area1" style="wedth:60%;padding:10px;font-size:30px;" value="計算" align = "center">
<button type = "button" class="btn btn-success" style="wedth:60%;padding:10px;font-size:30px;" onclick="history.back()">TOPに戻る</button>
</div>
</form>
<h2 type = "number" id="area2" style="text-align:center"> </h2>
<h2 type = "number" id="area3" style="text-align:center"> </h2>
</body>
</html>
