ZitatWie kann ich diese an eine andere Stelle positionieren?
Wie meinst Du das? In der Seite gibt es nur die Galerie. Du kannst sie zentriert, links oben, links mittig etc. positionieren. Ist es das, was Du meinst?
ZitatWie kann ich diese an eine andere Stelle positionieren?
Wie meinst Du das? In der Seite gibt es nur die Galerie. Du kannst sie zentriert, links oben, links mittig etc. positionieren. Ist es das, was Du meinst?
Ja, meiner (MS Visual Studio Community) zeigt Validierungsfehler sofort an.
Habe da etwas zum Blättern ausgearbeitet:
Wenn ich das richtig sehe, wird die Funktion startGame() im Spielverlauf mehrfach aufgerufen, so dass der Eventlistener mehrfach registriert wird und beim Klick die Funktion add() mehrfach aufgerufen wird.
Bitte auch die Funktionen getText und getColor2. Und den Aufruf der Funktion, mit dem der Fehler auftritt.
Stimmt, aber das ist nicht der einzige Fehler:
allBirds = document.getElementById(".bird-gallery"),
listOfBirds = document.querySelector("bird-list").innerHTML;
getElementById erwartet eine ID als Parameter. Hier kannst Du am sinnvollsten document.querySelector verwenden.
document.querySelector erwartet dagegen einen CSS-Selektor, d. h. Du musst ein # voran stellen.
Dies funktioniert:
Hm, und wo ist da das Javascript? In einer der Javascript-Dateien, vermute ich?
Ah so. Mein erster Code funktioniert aber auch, ich habe ihn getestet.
Mit
bekommst Du nur das DOM-Element, nicht den Text darin . So funktioniert es:
<script type="text/template" id="bird-list">
[{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" }]
</script>
<script>
listOfBirds = document.getElementById("bird-list").innerText;
var obj = JSON.parse(listOfBirds);
console.log(obj);
</script>
Allerdings ist das ganze unnötig kompliziert. Dieses funktioniert genau so gut:
<script>
var listOfBirds = [{ "id": 1, "name": "Haussperling", "latinName": "Passer domesticus", "imagePath": "resources/images/haussperling.png", "audioPath": "resources/data/audio/haussperling.ogg" }, { "id": 2, "name": "Kohlmeise", "latinName": "Parus major", "imagePath": "resources/images/kohlmeise.png", "audioPath": "resources/data/audio/kohlmeise.ogg" }, { "id": 3, "name": "Star", "latinName": "Sturnus vulgaris", "imagePath": "resources/images/star.png", "audioPath": "resources/data/audio/star.ogg" }, { "id": 4, "name": "Amsel", "latinName": "Turdus merula", "imagePath": "resources/images/amsel.png", "audioPath": "resources/data/audio/amsel.ogg" }];
</script>
<script>
console.log(listOfBirds);
</script>
Für background-image ist auch der Wert none möglich:
Informiere dich über Mediaquries, damit ist es kein Problem.
Sehe gerade, dass das SVG ist. Dann weiß ich es auch nicht. Aber warum SVG? Das kannst Du doch problemlos mit HTML und CSS machen?
Du musst html() statt text() verwenden,
HTML ignoriert Zeilenumbrüche bei der Darstellung bzw. setzt sie in ein Leerzeichen um. Du musst statt dessen <br> verwenden.
ZitatBeim Attribute type=checkbox wird der Focus mit übernohmen da bleibt das Fenster offen.
Bei mir nicht (Opera). Browserspezifisch?
ZitatZitat
wieder mit einem negativen Margin darüber zu positionieren.
da würde ich aber auch den Focus verlieren
Da hast Du wohl Recht, habe ich nicht bis zu Ende gedacht.
Dann bleibt wahrscheinlich nur Javascript.
Wo kommt denn die Fehlermeldung, in der Console? Sieht stark nach JSON aus.
Da der Button vom Typ "submit" ist, und Du keine action im Formular angegeben hast, wird die Seite neu geladen, wenn Du ihn drückst.
Ist da u. U. noch mehr Javascript im Spiel?
PS: Da fehlt ein schließendes </div>. Außerdem sehe ich den Sinn nicht, einschl. der Pseudo-Tabelle.
PPS: Ein (unschöner) Workaround könnte sein, das Input und die Checkbox aus dem Focus-Element herauszunehmen und dann wieder mit einem negativen Margin darüber zu positionieren.
:focus-within wäre eine Lösung, wird aber leider von Microsoft nicht unterstützt:
Ich verwende dafür gern diesen Generator:
http://www.cssportal.com/css-tooltip-generator/
Oder, wenn es flexibler sein soll, Tooltipster:
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.