Wie kann ich Random Sätze ausgeben mit javascript?
4 Kolonnen und jede gibt einen anderen random text aus. nach klicken vom Buttom
3 Antworten
Du solltest die Sätze in ein Array packen.
Die 5 Elemente sollten die selbe Klasse haben.
Ich gehe jetzt mal davon aus, dass die Elemente
window.addEventListener("load", function() {
var sentences = [
["Sentence-1 for 1st Element", "Sentence-2 for 1st Element", "Sentence-3 for 1st Element"],
["Sentence-1 for 2nd Element", "Sentence-2 for 2nd Element", "Sentence-3 for 2nd Element"],
["Sentence-1 for 3rd Element", "Sentence-2 for 3rd Element", "Sentence-3 for 3rd Element"],
["Sentence-1 for 4th Element", "Sentence-2 for 4th Element", "Sentence-3 for 4th Element"],
["Sentence-1 for 5th Element", "Sentence-2 for 5th Element", "Sentence-3 for 5th Element"]
];
var elements = document.getElementsByClassName("yourClass");
for (var i = 0; i < elements.length; i++) {
elements[i].removeChild(elements[i].childNodes[0]);
var randomNumber = parseInt(Math.random() * 3);
var randomText = sentences[i][randomNumber];
var randomTextChild = document.createTextNode(randomText);
elements[i].appendChild(randomTextChild);
}
}, false);
"yourClass" musst du halt ersetzten.
Das kann auch nicht funktionieren. Dein Javascript Code läuft bevor deine DIVs überhaupt existieren - setze dein Script Tag als letztes Element vor dem schließenden Body-Tag.
Du kannst die nötigen Funktionsaufrufe zur Erstellung des Textes in einer einzigen Funktion zusammenfassen...
function randomText() {
document.getElementById("erstes").innerHTML = teil1();
document.getElementById("zweites").innerHTML = teil2();
document.getElementById("drittes").innerHTML = teil3();
document.getElementById("viertes").innerHTML = teil4();
document.getElementById("funftes").innerHTML = teil5();
}
...die du dann beim Klick auf deinen Button aufrufst:
<input type="button" value="Zufall" onclick="randomText();">
Ist zwar immer noch sehr umständlich gelöst, sollte aber zumindest laufen.
Versuchs mal so: http://codepen.io/anon/pen/RryGJb?editors=1010
Deine Texte musst du natürlich noch anpassen.
Warum so förmlich, kannst ruhig "du" sagen :) Modernes JavaScript sieht anders aus, da gebe ich dir zu 100% Recht. Ich wollte den Code nicht zu sehr verändern, so dass der Fragesteller einfacher folgen kann. Hier ging es ja auch nicht um "best practices" sondern um ein anderes, konkretes Problem.
Was die Sache mit den Events angeht kann ich dir auch nur zustimmen. innerHTML ist jedoch definitiv nicht "veraltet", schau dir einfach mal den jQuery-Source an.
Die Alternative zu innerHTML, document.createElement und Konsorten hat leider einen gewaltigen Haken. Stell dir vor du verwendest eine clientseitige Template-Engine um bspw. riesige Tabellen dynamisch zu erstellen. Um diese Strings in den DOM zu injezieren kannst du im Grunde nur innerHTML verwenden. Alles andere bremst die Performance massiv aus. Wenn du eine gute Alternative anzubieten hast... ich lerne gern dazu :)
Hier mein Script
var Weisheiten = new Array(5);
Weisheiten[0] = "Gäste und Reiher sehen .";
Weisheiten[1] = "Vier Dinge kommen nicht zurück: der .";
Weisheiten[2] = "Wer wenig gesehen hat, staunt viel.";
Weisheiten[3] = "Um klarer zu sehen, genügt es oft, zu lassen.";
Weisheiten[4] = "Wer mich korrekterweise Wer mir ist mein Feind.";
var Weisheiten2 = new Array(5);
Weisheiten2[0] = "Wer Angst hat, .";
Weisheiten2[1] = "Wenn man auch ";
Weisheiten2[2] = "Wir lieben das ";
Weisheiten2[3] = "Der Frosch im";
Weisheiten2[4] = "Sich an den ";
var Weisheiten3 = new Array(5);
Weisheiten3[0] = "am schönsten aus, wenn sie sich erheben";
Weisheiten3[1] = "Wenn man auch den Kopf in den.";
Weisheiten3[2] = "Wir lieben das Leben nur, weil es ";
Weisheiten3[3] = "Der Frosch im Brunnen weiß nichts ";
Weisheiten3[4] = " kritisiert, ist mein Lehrer.";
var Weisheiten4 = new Array(5);
Weisheiten4[0] = "abgeschossene Pfeil, das";
Weisheiten4[1] = "nur den Blick schweifen";
Weisheiten4[2] = "Wir lieben das Leben nur, weil es uns ";
Weisheiten4[3] = "fälschlich schmeichelt, ";
Weisheiten4[4] = "Sich an den einfachen Dingen des Lebens .";
var Weisheiten5 = new Array(5);
Weisheiten5[0] = ", die Würfel zu schütteln, ";
Weisheiten5[1] = "auch den Kopf in den Sand ";
Weisheiten5[2] = " Leben nur, weil es uns";
Weisheiten5[3] = "im Brunnen weiß nichts vom ";
Weisheiten5[4] = "Dingen des Lebens";
function teil1()
{
// 1 muss nicht addiert werden, da der Index des Feldes von 0..9 läuft
var Zufallszahl = Math.floor(Math.random() * Weisheiten.length);
return Weisheiten[Zufallszahl];
}
function teil2()
{
var Zufallszahl2 = Math.floor(Math.random() * Weisheiten2.length);
return Weisheiten2[Zufallszahl2];
}
function teil3()
{
var Zufallszahl3 = Math.floor(Math.random() * Weisheiten3.length);
return Weisheiten3[Zufallszahl3];
}
function teil4()
{
var Zufallszahl4 = Math.floor(Math.random() * Weisheiten4.length);
return Weisheiten4[Zufallszahl4];
}
function teil5()
{
var Zufallszahl5 = Math.floor(Math.random() * Weisheiten5.length);
return Weisheiten5[Zufallszahl5];
}
document.getElementById("erstes").innerHTML="Text"+teil1();
document.getElementById("zweites").innerHTML="Text"+teil2();
document.getElementById("drittes").innerHTML="Text"+teil3();
document.getElementById("viertes").innerHTML="Text"+teil4();
document.getElementById("funftes").innerHTML="Text"+teil5();
Bei jedem Aufruf wird zufällig ein Spruch ausgewählt und als "Spruch" angezeigt.
Wieso machst du jedes Array-Element manuell rein, mach doch einfach Weisheiten = [ ]; und da schreibst du dann deine Werte mit Weisheiten.push("Dein Text") rein.
So könntest du deinen Code noch optimieren, um Redundanzen zu vermeiden: http://codepen.io/Minilexikon/pen/OWjObN
Also... Modernes JavaScript sieht anders aus. Langsam bekomme ich das Gefühl, die Webenwtickler hier im Forum sind größtenteils Fortschrittresistent und absolut alte Schule. "innerHTML" ist total veraltet, über Events als Attribut will ich gar nicht reden... Haben Sie überhauprt schon mal was HTML5 bzw. EventListeners gehört oder stecken Soie noch im jahr 2002?