<!DOCTYPE html> <html lang="ja"> <head> <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> <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>