document.getElementById("wort").innerHTML = "?????";Hiermit bist Du schon auf dem richtigen Wege. Was noch fehlt, ist dieses:
var daswort = wort[Math.floor(Math.random()*wort.length)];
document.getElementById("wort").innerHTML = daswort;Und ebenso mit der Beschreibung.
Und informiere dich, wie man mit Funktionen arbeitet, z. B. direkt hier bei HTML-Seminar:
Das ist ja erfreulich, dass Du schon Eigeninitiative entwickelt hast!
das Script bereits beim Laden der Seite, ein zufälliges Wort generiert und angezeigt
Es gibt auch ein onload:
window.onclick = myFunction;
window.onload = myFunction;die Wörter stehen nicht für sich alleine, sondern benötigen auch eine kurze Beschreibung in Form eines Satzes
Die Beschreibungen ebenfalls in einem Array ablegen:
var words = [
"Apfel",
"Banane",
"Birne"
];
var descriptions = [
'Beschreibung für "Apfel"',
'Beschreibung für "Banane",
'Beschreibung für "Birne"'
];Schließlich musst Du Wort und Beschreibung noch auf der Seite anzeigen. Informiere dich dazu über getElementById und innerHTML.
Sehr gutes Beispiel, Basti!
Hast Du dir auch mein Fiddle angesehen? Sollte alles leisten, was Du dir wünschst, mit Datatables und einer Anweisung jQuery.
Bei dem Code in deinem Eingangsposting und dem aus #8 funktioniert es nicht, weil das img-Element tief in divs verschachtelt ist, Der "~"-Operator findet jedoch nur Geschwisterelemente. Und mit CSS kann man leider nicht im Baum nach oben gehen. Du musst es so umstrukturieren, dass das anzuzeigende Element auf der selben Ebene wie das gehoverte oder tiefer.
Da steht ja das Gesamt ergebniss drinne und das muß ja auch stehen bleiben.
Dafür gibt es den Footer bzw. Fuß:
https://wiki.selfhtml.org/wiki/HTML/Tabe…er_und_Fu.C3.9F
Wirf mal einen Blick auf datatables, dort gibt es die Option scrolly, wenn man die benutzt, ist die Tabelle sowohl scrollable als auch sortable.
.getLayer('text' + nr).text;
was macht dieser Ausdruck genau?
Was bedeuted das .text
getLayer('text' + nr)ermittelt den Layer mit dem Namen des Eingangsparameters. Zuvor wurde dieser mit dem selben Namen erzeugt: .drawText({ name: 'text' + nr,. D. h. wenn nr = 5 lautet der Name text5. 'text' ist nur ein Bestandteil des Namens, den ich selber fest gelegt habe.
Und mit .text ermittelt man den Wert des Attributes, das man zuvor hinein geschrieben hat. Du hast Recht, die Doku ist hier etwas dürftig. Das dies geht, habe ich nur durch Probieren heraus gefunden.
warum ist das Ergebnis nur nr, dh zB. nur "3" wenn da zweimal text verwandt wird?
'text' wird nur im Namen verwendet. In das Attribut text wurde beim drawText nur nr hinein geschrieben: text: nr Man könnte irgend etwas hinein schreiben wie 'hallo' und könnte dann diesen Text wieder heraus lesen. Das Attribut text hat mit dem Namen nichts zu tun.
Vgl. auch mit dem anderen Beispiel mit den Plus- und Minus-Tasten: Dort kann man das Attribut text beliebig verändern wobei der Name immer gleich bleibt.
Mag zunächst ein wenig kompliziert sein, aber nur dadurch kann man ein gezeichnetes Element hinterher wieder ansprechen und verändern. Bei einfachem Javascript ist das nicht möglich. Man müsste "zu Fuß" die gezeichneten Elemente in Objekten parallel halten und nach jeder Änderung neu zeichnen. Genau das tut jCanvas hinter den Kulissen, aber es ist verborgen und man muss sich darüber keine Gedanken machen.
Mit dem nr kann ich nicht arbeiten, Hier erhalte ich immer den letzten Index.
Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife zuweist und diese auf einen Schleifenindex zugreifen: Wenn das Event feuert, ist die Schleife längst durchgelaufen und der Index, hier die Variable nr, hat den Endwert, hier 10.
Lösen kann man dies durch die Verwendung einer Funktion, wie du schon geschrieben hast oder einfacher, indem man "let" statt "var" bei der Initalisierung verwendet. Dann findet der Listener den Wert vor, den die Variable hatte, als der Listener registriert wurde.
Und um jederzeit auf die Elemente zugreifen zu können, empfehle ich, ihnen Namen zu geben.
<canvas width="400" height="300"></canvas>
<script>
var wrect = 50, hrect = 50, dist = 5,
xstart = 50, ystart = 50,
cv = $("canvas");
for (let x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
var num = nr;
cv.drawRect({
name: 'rect' + nr,
layer: true,
fillStyle: 'lightblue',
x: x, y: y, width: wrect, height: hrect,
fromCenter: false,
click: function (layer) {
var txt = cv.getLayer('text' + nr).text;
alert(txt);
$(this).animateLayer(layer, {
fillStyle: 'blue'
});
}
}).drawText({
name: 'text' + nr,
layer: true,
fillStyle: 'black',
x: x + wrect / 2,
y: y + hrect / 2,
text: nr
});
if ((nr + 1) % 5 == 0) {
y += dist + hrect;
x = xstart;
} else {
x += dist + wrect;
}
}
</script>Das Event ended feuert nur bei einem video-Element, nicht bei einem iFrame, wo ein Video drin ist. Der TO schrieb weiter oben, dass er Videos von verschiedenen Plattformen hat, vimeo, google drive etc. Da ist es eine echte Herausforderung, für jedes Video das ended zu erkennen.
Ich habe mal dies ausgearbeitet:
<canvas id="canvas3" width="500" height="400"></canvas>
<script>
var bgColor = '#B5EC9B', textColor = 'black',
borderWidth = 2, borderColor = 'black';
function drawPlusMinus(cv, x, y, h, content, nr) {
var xcenter = x + h / 2, ycenter = y + h / 2;
var w = h;
cv.drawRect({
layer: true,
name: 'c' + content + nr,
strokeStyle: borderColor, strokeWidth: borderWidth,
fillStyle: bgColor,
x: xcenter, y: ycenter,
width: w, height: h,
fromCenter: true,
click: function () {
var textval = cv.getLayer('textvalue' + nr);
var val = parseInt(textval.text);
console.log(val);
if (content == '+') {
val++;
} else if (val > 0) {
val--;
}
cv.setLayer('textvalue' + nr, {
text: val
}).drawLayers();
}
}).drawText({
layer: true,
name: 'text' + content + nr,
align: 'center',
fillStyle: textColor,
x: xcenter, y: ycenter,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: content,
fromCenter: true
});
}
function drawGroup(cv, x, y, h, w, nr) {
var xcenter1 = x + w / 2, ycenter1 = y + h / 2;
cv.drawRect({
layer: true,
name: 'cvalue' + nr,
strokeStyle: borderColor, strokeWidth: borderWidth,
fillStyle: bgColor,
x: xcenter1, y: ycenter1,
width: w, height: h,
fromCenter: true
}).drawText({
layer: true,
name: 'textvalue' + nr,
align: 'center',
fillStyle: textColor,
x: xcenter1, y: ycenter1,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: nr,
fromCenter: true
});
drawPlusMinus(cv, x + w, y, h / 2, '+', nr);
drawPlusMinus(cv, x + w, y + h / 2, h / 2, '-', nr);
}
for (let i = 0; i < 3; i += 1) {
drawGroup($('#canvas3'), 120 + i * 120, 100, 60, 60, i + 1);
}
</script>Ich habe den einzelnen Elementen Namen mit Nummer gegeben: name: 'textvalue' + nr Dies ist jeweils der linke Layer, der den aktuellen Wert enthält.
Mit
var textval = cv.getLayer('textvalue' + nr);
var val = parseInt(textval.text);kann ich dann im Clickhandler diesen Layer ermitteln und den Wert herausholen.
Auf die gleiche Weise kannst Du auch den Wert irgend wo anders im Skript herausholen. Um das zu vereinfachen, kann es jedoch angebracht sein, die Werte parallel in einem Array zu führen.
Den Grund habe ich schon beschrieben:
werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte,
d. h. Du musst die Texte auch als Layer definieren.
Ich muss zugeben, dass das mit den Layern bei jCanvas etwas kompliziert ist: Zeichnet man mit drawLayers() neu, werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte, Wegen der anderen Vorteile würde ich aber empfehlen, bei jCanvas zu bleiben.
In diesem Fall kann es vorteilhaft sein, das Zentrum als Bezugspunkt zu verwenden (fromCenter:true), weil dann die Texte automatisch mittig sind.
<canvas id="canvas3" width="500" height="400"></canvas>
<script>
for (var i = 0; i < 3; i += 1) {
$('#canvas3').drawRect({
layer: true,
fillStyle: '#B5EC9B',
x: 140 + i * 80,
y: 330,
width: 30,
height: 30,
fromCenter: true
}).drawText({
layer: true,
align: 'center',
fillStyle: 'black',
x: 140 + i * 80,
y: 330,
fontSize: 20,
fontFamily: 'Verdana, sans-serif',
text: i + 1,
fromCenter: true
});
}
</script>1. Tipp, der dir offenbar leider nicht zusagt: jCanvas verwenden, das unterstützt Mousevents für Elemente ohne dass man mit den Koordinaten herum rechnen muss.
2. Tipp um Schreibarbeit zu sparen: Parameter in einem Array ablegen und die drei Gruppen in einer Schleife zeichnen.
Die Frage wird hier beantwortet:
Dann geht es natürlich nicht mit Mediaqueries. Was der offizielle Weg ist, weiß ich nicht, aber was Du in deinem Eingangsposting beschrieben hast, scheint mir gängig und praktikabel zu sein.
Was ist denn der Hintergrund bei diesem Vorhaben? Je nachdem, nach was für welchen Kriterien diese Dateien geladen werden sollen, kämen u. U. auch Mediaqueries in Frage.
IndexOf und search() ist auch doof.Sobald erein Wort gefunden hat ist die suche zuende.
Die Zeigen nicht alle treffer an
match() mit dem Modifikator "g" ist die Lösung.
Hallo, ich wollte wissen, wie man alle Elemente mit z.B. der ID, oder Klasse "Fenster" findet und jedes Element davon in einer Variable speichern kann. Oder einem Array
Das hatte ich so verstanden, dass der TO Elemente anhand der Klasse o. ä. ermitteln will. Was Du anschneidest, läuft auf eine Suche in den Inhalten hinaus, ich glaube, das hatten wir in einem anderen Thread.
was ist indexOf?
Kannst Du z. B. hier nachlesen:
https://wiki.selfhtml.org/wiki/JavaScrip…/String/indexOf
Ich sehe aber nicht, wie dir das bei deinem Vorhaben helfen kann.
Informiere dich über document.querySelectorAll(), z. B. ebenfalls bei SelfHTML, damit kannst Du alle Elemente eines bestimmten Typs über einen Selektor ermitteln.
Über Selektoren kannst Du dich ebenfalls bei SelfHTML informieren:
https://wiki.selfhtml.org/wiki/CSS/Selektoren
Und die Funktion querySelectorAll() liefert gleich ein Array bzw. eine Nodelist, d. h. das Eintragen in Variablen bzw. ein Array brauchst Du nicht selbst zu machen.