nicht angemeldet
Text mehrfach ändern
Hallo,
folgendes möchte ich programmieren und benötige dabei Hilfe:
Auf seite1.html steht "Text1". Darunter befindet sich ein Button oder Link, der beim Anklicken aus "Text1" "Text2" macht. Beim nächsten Klick "Text3" usw. Wenn alle Texte angezeigt wurden soll mit dem nächsten Klick auf seite2.html gewechselt werden.
Ich denke mit HTML allein geht das nicht und man benötigt Javascript. Dabei hatte ich an eine Kombination aus innerhtml und einer Schleife gedacht. Hat jemand einen Tipp, da ich Anfänger in Javascript bin?
-
Hi,
klingt so, als ob du noch nix mit JS getan hast.
Im web wimmelt es von Tutorials für den Einstieg in JS und JQuery.
einfach mal Googlen: “tutorial JS”
Deine Aufgabe, dürfte in so ziemlich jedem Tutorial am Anfang als Bsp. vorkommen, so das du binnen kurzer Zeit die Lösung hast.
Suchbegriiffe wären auch:
onclick()$(“button”).click( function(){ // etwas machen });Viele Grüße aus LA
--
ralphi-
Hallo ralphi,
Vielen Dank für deine Antwort. Was ich bisher habe, funktioniert leider noch nicht wie beschrieben. Was muss ich ändern?
<p id="Anzeige">Text0</p>
<button onclick="myFunction()">Weiter</button>
<script>
function myFunction() {
var i;
var text = "<ul>";
var Texte = ["Text1", "Text2", "Text3", "Text4"];
for (i = 0, tot=Texte.length; i < tot; i++) {
text += "<li>" + Texte[i] + "</li>";
}
text += "</ul>";
document.getElementById("Anzeige").innerHTML = text;
}
</script>Viele Grüße
tab-
Hi tab,
ich nutz gern Jquery:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var Texte = ["Text1", "Text2", "Text3", "Text4"]; var i = 0; alert(i); $('button').click( function(){ i++; if ( i >= Texte.length ) { window.location="http://www.newlocation.com"; } $("span").text( Texte[i]); }); }); </script> </head> <body> <span>Text1</span> <br> <button>weiter</button> </body> </html>Viele Grüße aus LA
--
ralphi-
Kommentare vergessen ;-)
<script> $(function(){ // warten bis HTML geladen // globale vars var Texte = ["Text1", "Text2", "Text3", "Text4"]; var i = 0; // klick auf button $('button').click( function(){ i++; // counter um eins erhöhen - bei jedem klick // aussteigen wenn alle durch if ( i >= Texte.length ) { window.location="http://www.newlocation.com"; } // text in den span (kann auch was anderes sein) packen $("span").text( Texte[i]); }); }); </script>Viele Grüße aus LA
--
ralphi -
Hallo ralphi,
das war im Wesentlichen was ich gesucht habe, danke! Eine Kleinigkeit ist mir noch aufgefallen: Vom Array Texte wird das erste Element "Text1" nicht angezeigt. "Text1" kommt aus dem span.
Muss ich beim formatieren des span-Bereichs durch CSS noch Besonderheiten beachten?
Viele Grüße
tab-
Hi,
das war im Wesentlichen was ich gesucht habe, danke! Eine Kleinigkeit ist mir noch aufgefallen: Vom Array Texte wird das erste Element "Text1" nicht angezeigt. "Text1" kommt aus dem span.
ein array begint bei 0
wenn du beim ersten klick erst text haben willst, setz den i++; = (i=i+1;) einfach hinter die Ausgabe im $('span').... und lasse den <span> (html) leer.Muss ich beim formatieren des span-Bereichs durch CSS noch Besonderheiten beachten?
nun
<span> ist unformatierter textbereich.
<h1> .. sind überschriften
<p> macht zeilenumbruch - geht aber auch mit <br>wenn du ein div nimmst, mach aus
$('span').text(inhalt);
einfach
$('div').html(inhalt);mit CSS kannst du alles formatieren - nach Lust und Laune ;-)
Viele Grüße aus LA
--
ralphi-
Vielen Dank nach LA!
tab
-
-
-
-
-