javascriptのinnerHTMLを動的に書き換える方法
- javascriptのinnerHTMLを使って要素の内容を動的に書き換える方法を紹介します。
- 一定時間の間、innerHTMLで表示した内容を、一定時間後に動的に変更させる方法を解説します。
- innerHTMLの内容を書き換える際には、setIntervalとsetTimeoutを組み合わせることで実現できます。
- ベストアンサー
javascriptのinnerHTMLを動的に書き換える方法
javascriptのinnerHTMLを動的に書き換える方法 宜しくお願い致します。 一定時間の間、innerHTMLで表示した内容を、一定時間後に動的に変更させる方法で躓いています。 以下、作ってみた内容です。 <script type="text/javascript"> <!-- //一定期間のループ処理 //ループ時間の定義 timer_handle = setInterval("time_count()",1000); //countの初期値 count = '0'; function time_count() { //HTML差し替え設定 document.getElementById('time').innerHTML = '経過時間：' + count + '秒'; //秒数のカウントアップ count = Number(count) + 1; } //5秒後に表示させる処理 setTimeout("next()",5000); function next() { //一定期間のループを解除 clearInterval(timer_handle); document.getElementById('time').innerHTML = ""; //HTML差し替え設定 document.getElementById('time').innerHTML = '処理がおわりました'; } // --> </script> </head> <body onLoad="time_count()"> <table> <tr><td> <span id="time"></span> </td></tr> </table> </body> </html> この処理を実行すると、5秒間1秒ずつのカウントが進み、5秒後にカウントが止まるだけでinnerHTMLの内容が書き換わりません。 どうすれば書き換えられるのでしょう？
- nikuq
- お礼率75% (477/631)
- JavaScript
- 回答数4
- ありがとう数19
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
おはよう。 かきかわらないげんいんというか、それは「仕様」らしい。さすが！ http://support.microsoft.com/kb/239832/ja setInterval("time_count()",1000); これみたいに、よびだすかんすうは、もじれつでわたすと、いまどきじゃないよ setInterval(time_count,1000); timer_handle これにも、var をつけよう！ count = '0'; さいしょ、もじれつで、 count = Number(count) + 1; これですうちあつかい。 なら、さいしょから var count = 0; で、 count += 1; でしょ！（あえてcount++としないけど） document.getElementById('time').innerHTML = ""; document.getElementById('time').innerHTML = '処理がおわりました'; １ぎょうめは、かくにんようか？いみがなかったり。 そして、 document.getElementById('time').firstChild.nodeValue = '処理がおわりました'; う～ん。ひらがなもつかれるぜぇ。
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
#3です。 count++; をけしわすれていたので、ついでにかきなおし。 (ぜんかくくうはくははんかくくうはくにちかんしてください) <script type="text/javascript"><!-- function init () { var doc = this.document; //一定期間のループ処理 //ループ時間の定義 var timer_handle = setInterval(time_count, 1000); function time_count () { var time = doc.getElementById('time'); arguments.callee.count = arguments.callee.count ? arguments.callee.count+1 : 1; // カウンター if (arguments.callee.count < 5) { //HTML差し替え設定 time.firstChild.nodeValue = '経過時間：' + arguments.callee.count + '秒'; } else { //一定期間のループを解除 clearInterval(timer_handle); time.firstChild.nodeValue = '処理がおわりました'; doc = arguments.callee = null; } } } // --></script> </head> <body onload="init();"> <table><tr><td><span id="time"> </span></td></tr></table> callee - MDC https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Functions/arguments/callee > document.getElementById('time').firstChild.nodeValue IEはホワイトスペースノード(くうはくもじのテキストノード)のかいしゃくがモダンブラウザと違うので、じったいさんしょうをつかいました。 第2回 ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～ - DOMから始めるJavaScri...：ITpro http://itpro.nikkeibp.co.jp/article/COLUMN/20070627/276068/
お礼
ありがとうございます！ ほんとうにべんきょうになります。 いただいたこーどをしっかりかみしめ、かみくだいて、じぶんのちしきにさせていただきます。 ごきょうりょく、かんしゃです！！
- think49
- ベストアンサー率59% (285/482)
#1のほそくより。 > varをつけることで、すうちあつかいになるんですね。 そうではなく、 var count = '0'; // 文字列型 var count = 0; // 数値型 です。 varせんげんなしではdeleteえんざんしでさくじょできてしまい、ECMAScript5の strict modeでは count = 0; もエラーになります。 なので、「varせんげんはしょうりゃくすべきではない」といわれています。 ---------- ・変数は利用する前に宣言しなくてはならない。言い換えれば、i=3という書き方はランタイムエラーになる。var i=3としなければならない。(iがこのスコープ内にはないという前提) http://www.infoq.com/jp/news/2009/12/ecmascript5 ---------- > inner.HTMLをかきかえるほうほうはないようですね。 IE8ならいけるかんじ。(ぜんかくくうはくははんかくくうはくにちかんしてください) <script type="text/javascript"><!-- //一定期間のループ処理 //ループ時間の定義 var timer_handle = setInterval(time_count, 1000); function time_count () { arguments.callee.count = arguments.callee.count ? arguments.callee.count+1 : 1; // カウンター if (arguments.callee.count < 5) { //HTML差し替え設定 document.getElementById('time').innerHTML = '経過時間：' + arguments.callee.count + '秒'; } else { //一定期間のループを解除 clearInterval(timer_handle); document.getElementById('time').innerHTML = '処理がおわりました'; } //秒数のカウントアップ count++; } // --></script> </head> <body onLoad="time_count();"> <table> <tr><td> <span id="time"></span> </td></tr> </table>
- babu_baboo
- ベストアンサー率51% (268/525)
＞varをつけることで、すうちあつかいになるんですね それはちがうじょ。とにかく、つけるしゅうかんにしましょう！ いか、おあそび。ぜんかくくうはくは、はんかくに。 ばぶぅ～。 <!DOCTYPE html> <title></title> <body> <div id="time"> </div> <script type="text/javascript"><!-- var display = function ( n ) { return function ( ) { n.value = this; }; }; var upCounter = function ( max, disp ) { var timerId; var count = 0; disp && disp.call( count ); timerId = setInterval( function( ) { disp && disp.call( count ); count += 1; if( count > max ) clearTimeout( timerId ); }, 1000 ); }; //____________________________ var t = document.getElementById('time'),i,ip; for(=0;i<360;i+=6){ ip = document.createElement('input'); ip.type='text'; ip.size='3'; ip.style.position='absolute'; ip.style.top = (500 - Math.cos(i*3.14159/180)*400 |0)+'px'; ip.style.left = (500 + Math.sin(i*3.14159/180)*400 |0)+'px'; upCounter(i/6, display(t.appendChild(ip)) ); } // --> </script>
お礼
ありがとうございます！ まだまだじゃばすくりぷとはしょしんしゃで、せっかくいただいたこーども、 じかんかけてゆっくりみないとりかいできませんです。。。 しっかりりかいして、すこしずつじぶんのちしきにさせていただきます。 ありがとうございましたー！
関連するQ&A
- tbody要素のinnerHTMLが書き換えられません
こんにちは、教えてください。 <form1> <table id="test"> <tbod> <tr><td></td><tr> </tbody> </table> </form1> 例えばうえのような感じになっていたとき、 var tbody = document.getElementById( "test" ).getElementsByTagName( "tbody").item( 0 ); これでtbody要素が取得できると思います。 tbody.innerHTML += tbody.innerHTML; だけどうのようにすると【htmlfile：未知の実行時エラーです】となります。 document.getElementById( "test" ).innertHTML += document.getElementById( "test" ).innertHTML; という感じは一応動きます。なんででしょうか？
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- IEにおけるinnerHTMLの記述ミス？
┌───┬───┐ │１行目 │ │ ├───┤ │ │２行目 │ボタン │ ├───┤ │ │３行目 │ │ └───┴───┘ というテーブルで、ボタンを押すごとに２行目が表示、非表示と切り替わるように、下のようなソースを書きました。 IE以外ではうまく行くのですが、IEだと 一回目の押下ではうまく行くのですが、その後が動きません。 ちなみに 最初の押下でエラーの警告がでています。 innerHTMLの記述を消したらそれは無くなりました、、、。 IE以外のブラウザでは上手く行くのですが、 IEではどこがダメなのでしょうか。 基本的なことで申し訳ありませんが、よろしくお願いします。 -------------------------------------------------------------- <script type="text/javascript"> function del() { document.getElementById('row2').style.display="none"; document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="2"><input type="button" value="2行目を表示" onclick="add()" /></td>' } function add() { userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("msie") > -1) { document.getElementById('row2').style.display="display"; } else { document.getElementById('row2').style.display="table-row"; } document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>' } </script> <style type="text/css"> table { border-collapse:collapse; } td { border:1px solid #ccc; } </style> <table> <tr id="row1"> <td>1行目</td> <td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td> </tr> <tr id="row2"> <td>2行目</td> </tr> <tr> <td>3行目</td> </tr> </table>
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- innerHTMLの初期値
下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。
- ベストアンサー
- JavaScript
- javascript カウントダウンについて
下記のようなjavascript でカウントダウンをしています。 ですが、指定日を過ぎると、00 表示になってしまいます。 これを指定日の指定時間を過ぎたら、-- という表示に変更し、 また、bodyないのタグにidを使って「指定日を過ぎました。」という 表示を出したいのですが、ご教授ねがいます。 <script language="javascript"> <!-- function countdown(year, month, day, hour, minute) { Today = new Date(); Todays_Year = Today.getFullYear() - 2000; Todays_Month = Today.getMonth() + 1; Todays_Day = Today.getDate(); Todays_Hour = Today.getHours(); Todays_Date = (new Date(Todays_Year, Todays_Month, Todays_Day, Todays_Hour, Today.getMinutes(), Today.getSeconds())).getTime(); Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime(); Time_Left = Math.round((Target_Date - Todays_Date) / 1000); if(Time_Left < 0) Time_Left = 0; days = Math.floor(Time_Left / (60 * 60 * 24)); Time_Left %= (60 * 60 * 24); hours = Math.floor(Time_Left / (60 * 60)); Time_Left %= (60 * 60); minutes = Math.floor(Time_Left / 60); Time_Left %= 60; seconds = Time_Left; cDay = document.getElementById("counter_day"); cHour = document.getElementById("counter_hour"); cMin = document.getElementById("counter_min"); cSec = document.getElementById("counter_sec"); cDay.innerHTML = GetFormated(days); cHour.innerHTML = GetFormated(hours); cMin.innerHTML = GetFormated(minutes); cSec.innerHTML = GetFormated(seconds); //Recursive call, keeps the clock ticking. setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ');', 1000); } function GetFormated(i) { if(i<10) { return "0"+i; } return i; } //--> </script> </head> <body> <span id="counter_day"></span> <span id="counter_hour"></span> <span id="counter_min"></span> <span id="counter_sec"></span> <script language="JavaScript"> <!-- countdown('07,11,05,21,00'); //-->
- 締切済み
- JavaScript
- セレクト部品の表示内容
が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか？ <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>
- ベストアンサー
- JavaScript
- 数値の表示方法を教えてください。
以下のプログラムで千円単位のカンマの表示方法や 小数第2位までの表現方法を教えてください。 よろしくお願いします。 <script type="text/javascript"> function keisan(){ var syouhizei = document.form1.syouhin1.value * 1.05; document.getElementById("zei").innerHTML = syouhizei; } 【省略】 <td><span id="zei">0</span> 円</td>
- 締切済み
- JavaScript
- JavaScriptについて
下記のJavaScriptでウィンドウサイズを取得し、 その値に応じてTableサイズを変化させるhtmlを作成したいのですが、 どうすれば良いですか？ ※下のスクリプトから???部分に値を入れたい。 <table width=??? height=??? border=1> <tr><td></tr></td> </table> //ウィンドウサイズを取得する function getWindowSize() { var sW,sH,s; sW = window.innerWidth; sH = window.innerHeight; s = "横幅 = " + sW + " / 高さ = " + sH; document.getElementById("WinSize").innerHTML = s; } </script>
- 締切済み
- JavaScript
- 計算結果の表示方法について
お世話になります。 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>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 べんきょうになりました！ varをつけることで、すうちあつかいになるんですね。 よけいなかんすうをはいじょできてすこしみばえがよくなりました。 しかもcount++をつかうことで、 //かうんとあっぷ count += 1; のぶぶんをそっくりさくじょできて、よりすりむになりました！ きほんはだいじなんですね！ inner.HTMLをかきかえるほうほうはないようですね。 ちょっとうらわざっぽくなりましたが、 <span id="time"></span> のぶぶんを <span id="before"> <span id="time"></span> として、 document.getElementById('time').firstChild.nodeValue = '処理がおわりました'; のぶぶんを document.getElementById('before').firstChild.nodeValue = '処理がおわりました'; としてじっこうしてみたら、すくりぷとえらーはひょうじされますが、 ちゃんとおもいどおりにどうさしました！ ほんとに、ひらがなはつかれますねぇ。