Javascript getElementByID - PullRequest
Новая
       4

Javascript getElementByID

1 голос
/ 29 января 2011

Я использую 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 */

My View: 

<!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, что я тут делаю не так?

Ответы [ 6 ]

3 голосов
/ 29 января 2011

Вы запускаете скрипт в заголовке страницы, поэтому он запускается до загрузки тела.Вы не можете добраться до элемента, потому что он еще не существует.

Поместите скрипт после элемента или поместите его в функцию, вызвав функцию из события onload тела.

3 голосов
/ 29 января 2011 
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')  );
}

Или просто поместите ваш скрипт как есть, не загружая window.onload перед закрытием тега body.

3 голосов
/ 29 января 2011

JavaScript выполняется до загрузки узла

1 голос
/ 29 января 2011

Я считаю, что происходит то, что вы пытаетесь получить элемент до полной загрузки DOM (обратите внимание, что ваш код для выбора элемента находится перед элементом, который вы хотите получить).Если вы запустили свой код после рассматриваемого элемента, вы должны получить ссылку на него.

Кроме того, библиотеки javascript, такие как jQuery , действительно помогают вам в этом и предоставляют вспомогательные средства.функция ready() ( подробнее здесь ), которая обеспечивает выполнение вашего кода только после загрузки страницы и инициализации DOM.

0 голосов
/ 29 января 2011

Я бы предложил использовать jQuery.Это исключило бы необходимость if..elseif, а также отсутствие необходимости тестировать все типы возможностей браузера.

в jQuery:

просто выполните этот вызов: 

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

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

  }
</script>
0 голосов
/ 29 января 2011

Как уже упоминалось, ваша функция работает до построения дерева 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 миллисекунд.

...