計算結果の表示方法について

解決済

質問者：macky_design
質問日時：2011/11/25 23:11
回答数：2件

お世話になります。
Java Scriptの記述方法で教えてください。

下記のフォームを作りました。
テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。
2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。
どなたかお知恵をお願いします。

<html>
<head>
<script type="text/javascript">
function calc(frm) {
var
result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10;
document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result;

result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60);
document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result;

result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60;
document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result;

result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100;
document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result;

}
</script>

</head>
<body>
<form>
<input type="text" name="a">
<input type="button" value="計算" onClick="calc(this.form)"><br>
計算結果<br>
<div id="result_1">時速　　　　　 <span></span>km/h</div>
<div id="result_2">キロペース　　<span></span>分</div><div id="result_3">　　　　　　　<span></span>秒</div>
<div id="result_4">5km　　　　　　<span></span>時間</div>
</form>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： jjon-com
回答日時：2011/11/26 17:03

<html>

<head>
<script type="text/javascript">
function calc(frm) {
var h = parseFloat(frm.elements["a"].value);
var result = Math.round(42.195 / h * 10) / 10;
document.getElementById('span1').innerHTML = result;

result = Math.floor(h / 42.195 * 60);
document.getElementById('span2').innerHTML = result;

result = Math.round(h / 42.195 * 60 * 60) % 60;
document.getElementById('span3').innerHTML = result;

result = Math.round(1 / 42.195 * 5 * h * 100) / 100;
document.getElementById('span4').innerHTML = result;
}
</script>
</head>

<body>
<form>
<input type="text" name="a">
<input type="button" value="計算" onClick="calc(this.form)"><br>
計算結果<br>
<div>時速 <span id="span1"></span>km/h</div>
<div>キロペース <span id="span2"></span>分
<span id="span3"></span>秒</div>
<div>5km <span id="span4"></span>時間</div>
</form>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2011/11/25 23:49

javascriptではなく、HTMLの問題の様に思えます。

<div>～</div>で記しているので、（ブロック要素なので）結果的に改行されてしまうことになるのでは？

無理やりそのままで1行にするなら、CSSで
　#result_2, #result_3 { display:inline; }
とするとか？

このあたり（↓）で、HTMLをチェックしてみることをお勧めします。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint …