2016-04-09 1 views
0

Итак, я только что начал экспериментировать с JavaScript. Я искал решение своей проблемы какое-то время и не могу найти ее. Вероятно, это простое объяснение, но я уверен, что в JS есть другие новички, которые могут иметь такую ​​же проблему.getElementById.innerHTML не работает

Причина, по которой мне нужно внедрить HTML с JS, заключается в том, что я пытаюсь установить информацию из базы данных в миниатюры. Хотя я еще не передал переменные в этот код.

<head> 
<script type="text/javascript"> 

    document.onload = function() { 

     document.getElementById("thumbnails").innerHTML = 
      '<div class="col-sm-6 col-md-4">' + 
       '<div class="thumbnail">' + 
        '<img src="pictures/workshop.jpg" alt="...">' + 
        '<div class="caption">' + 
         '<h3>Thumbnail label</h3>' + 
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' + 
         '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' + 
        '</div>' + 
       '</div>' + 
      '</div>'; 
    } 

</script> 
</head> 

<body> 
    <div class"row" id="thumbnails"> 
    </div> 
+0

Так в чем же проблема? Сообщаются ли ошибки? Делает ли что-нибудь? Вы пытались добавить 'console.log()' вызовы, чтобы убедиться, что код работает? – Pointy

+0

console.log (document.getElementById («миниатюры»). InnerHTML); Кажется, ничего не возвращает на консоль. Хотя в теге id есть другие элементы. Что показано на моей странице. Изменить: вот ссылка на страницу http://home.nith.no/~frotor15/eksamenwebS2/home.php –

+2

Я думаю, вы ищете либо ... 'window.onload = function() {};' или 'document.addEventListener ('DOMContentLoaded', function() {});' – Emissary

ответ

1

Решение:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello World</title> 
    </head> 
    <body> 
     <div class"row" id="thumbnails"></div> 

     <script type="text/javascript"> 

      function var1() { 
       document.getElementById("thumbnails").innerHTML = 
        '<div class="col-sm-6 col-md-4">' + 
         '<div class="thumbnail">' + 
          '<img src="pictures/workshop.jpg" alt="...">' + 
          '<div class="caption">' + 
           '<h3>Thumbnail label</h3>' + 
           '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et erat a ipsum luctus gravida. Nunc in elit id neque lobortis viverra eu a lorem. Donec eget augue a odio consectetur tempus eu vitae turpis.</p>' + 
           '<p><a href="#" class="btn btn-primary" role="button">Delta</a> <a href="#" class="btn btn-default" role="button">Les mer</a></p>' + 
          '</div>' + 
         '</div>' + 
        '</div>'; 
      } 

      window.onload = var1; 
     </script> 
    </body> 
</html> 

Во всяком случае, я буду предложить вам использовать JQuery (https://jquery.com).

+0

jQuery здесь совсем не обязательно. Кроме того, нет необходимости объявлять функцию с именем 'var1'. Вы можете просто использовать 'window.onload = function() {' ... '}'. – Xufox

+0

Эй, jQuery Это всего лишь предложение сделать больше и написать меньше. Да, я знаю, что нам не нужно объявлять эту функцию, но это просто пример, чтобы показать, как это сделать :) –

+0

Именование переменной 'var1' является плохим примером –

Смежные вопросы