Hallo leute
Zurzeit lerne ich JavaScript von Buch und bin bei lektion 16 beim Canvas tag stehen geblieben und zwar muss ich ein Code abschreiben,wo ich 3Balken ablesen kann und auch 3 Balken zeichnen soll.
Ich verstehe nicht,wie das mit <thead> <tbody> funktioniert und hab noch nie damit gearbeitet.Kann mir das jemand erklären?
Das ist der code:
<!DOCTYPE html>
<html>
<head>
<title>Kapitel 16</title>
<meta charset="UTF8">
</head>
<body>
<canvas id="grafik" width="150" height="150">
</canvas>
<script>
function zeichnne(){
var canvas = document.getElementById("grafik");
var context = canvas.getContext("2d");
context.save();
context.scale(1, -1);
context.translate(0, -200);
for (var i = 0; i < daten.length; i++){
zeichneBalken(ctx, i * 100, daten[i].gold, "#FFD700", "#CFA700");
zeichneBalken(ctx, i * 100 + 30, daten[i].silber, "#C0C0C0", "#909090");
zeichneBalken(ctx, i * 100 + 60, daten[i].bronze, "#AF773B", "#7F470B");
}
context.restore();
}
zeichnne();
function liesTabelle(){
var tabelle = document.getElementById("medallienspiegel");
var abteilungen = tabelle.getElementsByTagName("thead")[0].getElementsByTagName("th");
var zeilen = tabelle.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
var gold = zeilen[0].getElementsByTagName("td");
var silber = zeilen[1].getElementsByTagName("td");
var bronze = zeilen[2].getElementsByTagName("td");
var ergebnis = [];
for (var i = 0; i < abteilungen.length; i++){
ergebnis[i] = {
abteilung : abteilungen[i].innerHTML,
gold: parseInt(gold[i].innerHTML),
silber: parseInt(silber[i].innerHTML),
bronze: parseInt(bronze[i].innerHTML),
}
}
return ergebnis;
}
function zeichneBalken(context, startX, medallien, farbe){
context.fillStyle = farbe;
context.fillRect(startX, 0, 30, medallien * 20);
context.strokeRect(startX, 0, 30, medallien * 20);
}
</script>