1

CodeIgniter 2.0 を使用していて、div の内容を Javascript で変更したいのですが、それを「取得」できないようです。これは、私の問題を示すために簡略化されたバージョンです。

私のコントローラー：

<?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 の両方で試しましたが、ここで何が間違っていますか?

4

6 に答える 6

3

ノードがロードされる前にJavaScriptが実行されます

于 2011-01-29T17:26:02.597 に答える
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 タグを閉じる前に、window.onload を割り当てずにスクリプトをそのまま配置します。

于 2011-01-29T17:26:48.043 に答える
3

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

要素の後にスクリプトを配置するか、関数内に配置して、本体の onload イベントから関数を呼び出します。

于 2011-01-29T17:27:15.920 に答える
1

DOMが完全に読み込まれる前に要素を取得しようとしていることが起こっていると思います（要素を選択するコードは、取得するアイテムの前にあることに注意してください）。問題の要素の後にコードを実行した場合は、その要素への参照を取得する必要があります。

余談ですが、 jQueryなどの JavaScript ライブラリは、この問題を解決するのに非常に役立ちます。また、ページが読み込まれて DOM が初期化された後にのみコードが実行されるようにするヘルパー関数ready()(詳細はこちら) を備えています。

于 2011-01-29T17:29:46.387 に答える
0

jQueryを使用することをお勧めします。これにより、if..elseif の必要がなくなり、すべての種類のブラウザー機能をテストする必要がなくなります。

jQueryで：

この呼び出しを行うだけです：

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

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

  }
</script>
于 2011-01-29T20:41:22.923 に答える
0

他の人が述べたように、関数は DOM ツリーが構築される前に実行されています。

たとえば、大量の画像をロードすると長時間待機する可能性があるため、関数を待ちたくない場合はonload、ここでコメント (5) を使用することを検討できます。ページ。

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

要素の後にコード<body>を配置して遅延を設定しても問題ありません。setTimeoutしたがって、ここで説明されているように 使用できます: http://www.w3schools.com/js/js_timing.asp、次のようなものがあります。

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

これにより、関数の実行が 30 ミリ秒遅れます。

于 2011-01-29T17:35:41.770 に答える