Spezieller Random/Zufalls-Generator

Abel · 18. März 2018

Liebes Forum

Ich bin noch ziemlich grün hinter den Ohren was Webprogrammierung anbetrifft. Also entschuldig mich bitte im Vorhinein für vielleicht zu offensichtliche, und grundlegende Fragen. Danke aber auch im Vorhinein für eure Grosszüzigkeit, hier irgendwelchen Leuten zu helfen!

Und zwar verfolge ich folgende Absicht, kriege es aber einfach nicht sauber hin:

— In einem Wordpress-Artikel hinterlege ich einen Link.

— Wenn man auf diesen Link klickt, öffnet sich eine neue, richtig simple, fast leere Seite.

— Beim Öffnen der Seite hat sich eigentlich bereits das Javascript abgespielt; nämlich das zufällige Erscheinen von Begriffen.

— Man klickt (egal wo auf dem Fenster) und das nächste, zufällige Wort erscheint.

Es handelt sich um insgesamt 99 Wörter, die zufällig erscheinen können, jedoch nicht für sich alleine stehen, sondern mit einem weiteren Satz erklärt werden.

Ich habe mit Handbüchern und Internet folgende Befehle rausfiltern können, die für die oben beschriebenen Funktionen benötigt werden:

window.onclick

// um überall Klicken zu können und damit das Script auszulösen.

var Array = [

„Sonne“,

„Mond“,

„Stern“

];

// die Liste der Wörter

var randomItem = Array[Math.floor(Math.random()*Array.length)];

// das Würfeln der Wörter

Das Ganze ist übrigens mit einem externen Stylesheet verknüpft, welches das Wort und die Beschreibung dazu wie folgt aussehen lässt. Wie muss ich hierbei die tags setzen, damit das funktioniert? Also das Wort in der Array-Liste müsste z.B. mit h1 und die Beschreibung mit p verknüpft sein.

Momentan sieht das HTML-File so aus:

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" href="http://meineadresse.de/wp-content/99/styles.css">

</head>

<body>

<script>

window.onclick = myFunction;

function myFunction(

var myArray = [

"Apfel",

"Banane",

"Birne"

];

var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

</script>

</body>

</html>

Alles anzeigen

Zusammenfassung der Fragen:

— die Wörter stehen nicht für sich alleine, sondern benötigen auch eine kurze Beschreibung in Form eines Satzes.

— das Script bereits beim Laden der Seite, ein zufälliges Wort generiert und angezeigt. Danach wird weiter geklickt/generiert. Wie lautet hier der Befehl?

— die Verknüpfung mit dem Stylesheet ist mir nicht ganz schlüssig.

Vielen Dank euch und liebe Grüsse

Abel

Sempervivum · 18. März 2018

Das ist ja erfreulich, dass Du schon Eigeninitiative entwickelt hast!

Zitat

das Script bereits beim Laden der Seite, ein zufälliges Wort generiert und angezeigt

Es gibt auch ein onload:

Code

window.onclick = myFunction;
window.onload = myFunction;

Zitat

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:

Code

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.

Abel · 18. März 2018

@Sempervivum

Vielen Dank für die rasche Antwort!

Scheint – oh Wunder – leider nicht zu funktionieren

Es liegt wohl daran, dass ich – wie Du es mir gesagt hast – getElementbyID einsetzen muss. Aber mir ist noch schleierhaft, wie das gehen soll.

Wenn ich im <body>-Bereich folgendes drin habe…

Code

<h1 id="wort">Wort</h1>

…müsste das Script jetzt das "Wort" randomly z.B. durch "Apfel" ersetzen.

Also:

Code

document.getElementById("wort").innerHTML = "?????";

Aber jetzt müsste doch eigentlich die mathematische random-Funktion aktiviert werden, die "Wort" durch ein Wort aus der var wort Liste austauscht.

Code

var wort = [
"Apfel",
"Banane",
"Birne"
];

Ich meine, die Logik dahinter verstanden zu haben, aber die Umsetzung krieg ich nicht hin.

Momentan sieht das Ganze noch so aus:

Code

<body>

<h1 id="wort">Wort</h1>
<p id="beschreibung">Beschreibung</p>

<script>

window.onclick = function;
window.onload = function;

function 

var wort = [
"Apfel",
"Banane",
"Birne"
];

var beschreibung = [
    'Eine runde Frucht "Apfel"',
    'Eine lange Frucht "Banane",
    'Eine glühbirnenförmige Frucht "Birne"'
];

var randomItem = wort[Math.floor(Math.random()*wort.length)
];

document.getElementById("wort").innerHTML = "?????";
document.getElementById("beschriebung").innerHTML = "?????";

</script>

</body>

Alles anzeigen

Ihr könnt gerne in den Code reinschreiben. Oft vergesse ich das Semikolon oder ähnliches, dann ist es klar, dass es nicht funktioniert

Sempervivum · 18. März 2018

Code

document.getElementById("wort").innerHTML = "?????";

Hiermit bist Du schon auf dem richtigen Wege. Was noch fehlt, ist dieses:

Code

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:

https://www.html-seminar.de/javascript-funktionen.htm

Spezieller Random/Zufalls-Generator

Jetzt mitmachen!

Teilen

Tags