2011-01-29 17 views
1

私はCodeIgniter 2.0を使用していますが、私のdivの内容をJavascriptで変更したいのですが、 "取得"できないようです。Javascript getElementByID

マイコントローラー:

<?php if (! defined('BASEPATH')) exit('No direct script access allowed'); 
class Index extends CI_Controller { 

    function __construct() 
    { 
     parent::__construct(); 
    } 

    function index() 
    { 
     $this->load->view('index.php'); 
    } 
} 
/* End of file index.php */ 
/* Location: ./application/controllers/index.php */ 

マイビュー:ここに私の問題を実証するためのストリップダウンバージョンです

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title><?php echo $this->config->item('app_name'); ?> : Welcome!</title>  
<script type="text/javascript"> 

function returnObjById(id) 
{ 
    if (document.getElementById) 
     var returnVar = document.getElementById(id); 
    else if (document.all) 
     var returnVar = document.all[id]; 
    else if (document.layers) 
     var returnVar = document.layers[id]; 
    return returnVar; 
} 

alert('fetching moonstarttime : ' + returnObjById('moonstarttime') ); 

</script> 
</head> 
<body> 

<div id="moonstarttime" name="moonstarttime" >I want this</div> 

</body> 
</html> 

しかし、ページのロードが、私はいつもfetching moonstarttime : nullを取得します。私はChromeとIEの両方で試しましたが、私はここで間違っていますか?ノードが

答えて

3
window.onload = function(){ 
function returnObjById(id) 
{ 
    if (document.getElementById) 
     var returnVar = document.getElementById(id); 
    else if (document.all) 
     var returnVar = document.all[id]; 
    else if (document.layers) 
     var returnVar = document.layers[id]; 
    return returnVar; 
} 
alert('fetching moonstarttime : ' + returnObjById('moonstarttime') ); 
} 

それとも、bodyタグを閉じる前に出ASSINGのwindow.onloadであるとして、あなたのスクリプトを置くをロードする前に

+0

おかげで、私はJavascriptがネストされた関数rlb.usa @ –

+0

をサポートし実現しませんでした。 'onload'ハンドラ(または要素の後ろ)で' returnObjById'関数を呼び出すコードだけが必要な場合は、好きな場所に 'returnObjById'関数を置くことができます。 – Guffa

3

ページのヘッダーでスクリプトを実行しているため、本文が読み込まれる前に実行されます。要素がまだ存在しないため、要素に到達することはできません。

要素の後にスクリプトを置くか、本体のonloadイベントの関数を呼び出す関数に記述します。

1

私は、DOMが完全に読み込まれる前に要素を取得しようとしていると考えています(要素を選択するコードが取得する項目の前にあることに注意してください)。問題の要素の後にコードを実行した場合は、その要素への参照を取得する必要があります。余談として

は、jQueryのようなJavaScriptのライブラリは本当にあなたのために、このリフティングを行う手助けし、ページがロードされ、DOMが初期化された後にのみ、あなたのコードが実行される確実にするヘルパー関数ready()more info here)が備わっています。

0

DOMツリーが構築される前に、あなたの関数が実行されています。

onloadの機能を待たない場合は、画像をたくさん読み込んだ場合に長い時間待つことができるので、ここでコメント(5)を使用すると見ることができますあなたのページの明らかな反応。あなたは<body>要素の後にあなたのコードを入れて、あなたも大丈夫だと思う遅延を入れた場合

http://dean.edwards.name/weblog/2006/06/again/

。 だから、あなたはここで説明したようsetTimeoutを使用することができます。 http://www.w3schools.com/js/js_timing.aspを、とのようなものがあります:30ミリ秒間実行されているから機能を遅らせる

setTimeout((function returnObjectById(name) { ... })(), 30);

を。

0

jQueryを使用することをお勧めします。 if..elseifの必要性と、すべてのタイプのブラウザ機能をテストする必要がなくなります。jQueryので

は、単にこの呼び出しを実行します。それがないが、それは問題とは無関係です:

<script type="text/javascript"> 
    $(document).ready(function() { 

    alert('fetching moonstarttime : ' + $('#moonstarttime') ); 

    } 
</script>