人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ストップウォッチで出した時間に特定の数字を掛けた結果をHTML上に表示させる方法

http://dotinstall.com/lessons/stop_watch_js_v2/23207 を参考に、javascriptとHTMLでストップウォッチを作成し、そのストップウオッチで出た数値に100をかけた結果を<div id="dis">に表示させたいです。
ストップウォッチ部分は上記URLのスクリプトで作成できたのですが、100をかけた結果(以下コード)があやまっているようで動作しません。誤り部分をご指摘いただけますと幸いです。よろしくおねがいします。

function kyori(){

var x = parseFloat(document.getElementById("sec").value);
document.getElementById("dis").firstChild.nodeValue = x * 100 +"m";


●質問者: zineriki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

多分、

document.getElementById("dis").firstChild

が null で、エラーが出てるんだと思います。

id="dis" の要素を

<div id="dis"></div>

というふうに空っぽじゃなくて、

<div id="dis">&nbsp;</div>

こういうふうに、何か中身を入れてあげる。

もしくは、

 document.getElementById("dis").firstChild.nodeValue = x * 100 +"m"; 

を、

 document.getElementById("dis").innerHTML = x * 100 +"m"; 

というふうにする。


zinerikiさんのコメント
アドバイスありがとうございます!しかしうまく動きませんでした....。 <div id="dis">0.00</div>といった内容にしていて、jsファイルは以下リンクの通り書いたのですがうまく動かないのです。重ね重ね恐縮ですがアドバイス頂けますと幸いです。 https://dl.dropboxusercontent.com/u/99863262/kyori.js

a-kuma3さんのコメント
kyori() という関数が、どこからも呼ばれてませんけど。 id="sec" の内容が書き換わるタイミングで、id="dis" も変えたい、ということですか?

a-kuma3さんのコメント
関数 timer() のところ、 >|javascript| function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); timerId = setTimeout(function() { timer(); }, 100); } ||< を、こんな感じにすれば良いかな? >|javascript| function timer() { var t = (((new Date()).getTime() - startTime) / 1000).toFixed(2); document.getElementById('sec').innerHTML = t; document.getElementById("dis").innerHTML = t * 100 +"m"; timerId = setTimeout(function() { timer(); }, 100); } ||<

zinerikiさんのコメント
ありがとうございます。 >id="sec" の内容が書き換わるタイミングで、id="dis" も変えたい、ということですか? はい、まさにそういう感じです!

a-kuma3さんのコメント
>はい、まさにそういう感じです! であれば、コメントで書き足した timer() 関数の中身を変更したものを試してみてください。

zinerikiさんのコメント
遅くなってしまってごめんなさい。 アドバイスいただいたコードを一部改良したもので動かすことができました!ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ