За последние 24 часа нас посетили 18270 программистов и 1642 робота. Сейчас ищут 1470 программистов ...

Ошибка Uncaught TypeError: Cannot read property 'innerHTML'

Тема в разделе "JavaScript и AJAX", создана пользователем PickUp, 13 фев 2014.

  1. PickUp

    PickUp Новичок

    С нами с:
    12 ноя 2013
    Сообщения:
    21
    Симпатии:
    0
    Здравствуйте, подскажите пожалуйста, в чём проблема?
    Ниже код. При нажатии на кнопку подгружается содержимое из базы данных. Но кнопка т.с. одноразовая. После первого нажатия начинают выводиться ошибки Uncaught TypeError: Cannot read property 'innerHTML' of null. Подскажите пожалуйста, где мой ляп?
    Код (Text):
    1. <script>
    2.     function showContent(link) {
    3.  
    4.         var cont = document.getElementById('thumbs');  //это директорию, куда фото грузится
    5.         var loading = document.getElementById('loading');  //надпись, возникающая во время загрузки
    6.  
    7.         cont.innerHTML = loading.innerHTML;
    8.  
    9.         var http = createRequestObject();                   // создаем ajax-объект
    10.         if( http ) {
    11.             http.open('get', link);                         // инициируем загрузку страницы
    12.             http.onreadystatechange = function () {         // назначаем асинхронный обработчик события
    13.                 if(http.readyState == 4) {
    14.                     cont.innerHTML = http.responseText;     // присваиваем содержимое
    15.                 }
    16.             }
    17.             http.send(null);    
    18.         } else {
    19.             document.location = link;   // если ajax-объект не удается создать, просто перенаправляем на адрес
    20.         }
    21.     }
    22.  
    23.     // создание ajax объекта
    24.     function createRequestObject() {
    25.         try { return new XMLHttpRequest() }
    26.         catch(e) {
    27.             try { return new ActiveXObject('Msxml2.XMLHTTP') }
    28.             catch(e) {
    29.                 try { return new ActiveXObject('Microsoft.XMLHTTP') }
    30.                 catch(e) { return null; }
    31.             }
    32.         }
    33.     }
    34. </script>
    35.     <form>
    36.         <input onclick="showContent('content_loader.php?w=3')" type="button" value="Страница 1"> // Собственно кнопки для загрузки страницы
    37.                 <input onclick="showContent('content_loader.php?w=1')" type="button" value="Страница 2">
    38.     </form>
    39.  
    40.                         <ul id="thumbs"> // директория, куда грузится контент
    41.                             <div id="loading" style="display: none">
    42.                             Идет загрузка...
    43.                             </div>
    44.                         </ul>
    Код content_loader.php:
    Код (Text):
    1. <?php
    2. $link = mysqli_connect("localhost", "root", "", "articl");
    3.  
    4. /* проверка соединения */
    5. if (mysqli_connect_errno()) {
    6.     printf("Соединение не удалось: %s\n", mysqli_connect_error());
    7.     exit();
    8. }
    9.  
    10. if (isset($_GET['w'])) {
    11. $w = $_GET['w'];
    12. $i = $i+$w;
    13. }
    14. else {
    15. $w = 0;
    16. $i = 1;
    17. };
    18. $query = "SELECT image, alt FROM image ORDER by ID LIMIT ".$w;
    19.  
    20. if ($result = mysqli_query($link, $query)) {
    21.  
    22.     /* извлечение ассоциативного массива */
    23.     while ($row = mysqli_fetch_assoc($result))
    24.  {
    25. /* Работа с базой данных */
    26.   printf ('
    27.   <li class="item-thumbs span3 design" style="background:url('.$row["image"].');">
    28.   <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="'.$title.'" href="'.$row["image"].'"'.$title.'">
    29.   <span class="overlay-img"></span>
    30.   <span class="overlay-img-thumb font-icon-plus"></span></a>
    31.   <img src="'.$row["image"].'" alt="'.$row["alt"].'">
    32.   </li>');
    33.   }
    34.       /* удаление выборки */
    35.     mysqli_free_result($result);
    36. }
    37.  
    38. /* закрытие соединения */
    39. mysqli_close($link);
    40. ?>
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Код (Text):
    1. cont.innerHTML = loading.innerHTML;
    лучше так:
    Код (Text):
    1. if(loading){
    2.   loading.style.display = 'block';
    3. }
    т.к. после первой загрузки, этого элемента не станет.
    А ещё лучше сообщение выводить скриптом:
    Код (Text):
    1. cont.innerHTML = '<li>Идет загрузка...</li>';
    тогда оно будет появляться всегда перед загрузкой.

    Код (Text):
    1. <div id="loading" style="display: none">
    2.   Идет загрузка...
    3. </div>
    элемент DIV лучше заменить элементом LI:
    Код (Text):
    1. <li id="loading" style="display: none">
    2.   Идет загрузка...
    3. </li>
    В content_loader.php в выражении
    Код (PHP):
    1. $i = $i+$w;
    используется не определенная ранее переменная $i.
    Этот скрипт вообще загружается по адресу content_loader.php?w=1 в браузер?
     
  3. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Код (PHP):
    1. $i+=$w;