2016-04-09 24 views
0

Also, ich habe gerade angefangen mit JavaScript zu experimentieren. Ich suche schon seit einiger Zeit nach einer Lösung für mein Problem und kann anscheinend keine finden. Es ist wahrscheinlich eine einfache Erklärung dafür, aber ich bin sicher, es gibt andere Neulinge für JS, die das gleiche Problem haben könnten.getElementById.innerHTML scheint nicht zu funktionieren

Der Grund, warum ich HTML mit JS implementieren muss, ist, weil ich versuche, Informationen aus einer Datenbank in die Tumbnails zu setzen. Obwohl ich die Variablen noch nicht in diesen Code eingegeben habe.

<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

Also was genau ist das Problem? Werden Fehler gemeldet? Passiert * irgendetwas *? Haben Sie versucht, 'console.log()' Aufrufe hinzuzufügen, um zu sehen, ob der Code überhaupt ausgeführt wird? – Pointy

+0

console.log (document.getElementById ("Thumbnails"). InnerHTML); Es scheint nichts zur Konsole zurückzukehren. Obwohl sich innerhalb des ID-Tags andere Elemente befinden. Welche zeigt auf meiner Seite. Bearbeiten: Hier ist ein Link zu der Seite http://home.nith.no/~frotor15/eksamenwebS2/home.php –

+2

Ich denke, Sie suchen entweder ... 'window.onload = function() {};' oder 'document.addEventListener ('DOMContentLoaded', function() {});' – Emissary

Antwort

1

Die Lösung lautet:

<!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> 

Wie auch immer, ich werde Sie schlagen Gebrauch jQuery (https://jquery.com).

+0

jQuery ist hier überhaupt nicht notwendig. Außerdem ist es nicht notwendig, die Funktion mit dem Namen 'var1' zu deklarieren. Sie können einfach 'window.onload = function() {' ... '}' verwenden. – Xufox

+0

Hey, jQuery Ist nur der Vorschlag, mehr zu tun und weniger zu schreiben. Ja, ich weiß, dass wir die Funktion nicht deklarieren müssen, aber es ist nur ein Beispiel dafür, wie man das macht :) –

+0

Das Benennen einer Variablen 'var1' ist ein schlechtes Beispiel –

Verwandte Themen