Wie kann ich einen kurzen Text mit HTML und JavaScript auf Knopfdruck ändern?
Hallo, ich würde gern mit HTML und JavaScript erreichen, dass ich "Text1" angezeigt bekomme und darunter ein "Weiter"-Button liegt, der dann mittels Klick "Text1" mit "Text2" austauscht, "Text2" mit "Text3" etc.
hatte mir dafür einen code mit Klickzähler herausgesucht, der auch Funktioniert. Der Plan wäre es, den Klickzähler dafür zu nutzen, um die Zahl zu erhöhen und von dieser Zahl den ausgespielten Text abhängig zu machen.
Also z.B. Zahl 1 = Text1 und Zahl 2 = text2 usw.
Allerdings verstehe ich noch nicht , wie ich den Text mit der Zahl verknüpfe und diesen dann ausspielen lassen kann.
Habt ihr da vllt eine Idee oder einen Tipp, bzw. aber auch eine bessere Lösung?
Vielen Dank im Voraus!
<div>
<center><h3 id="counter-label">0</h3></center>
<center>
<div>
<button onclick="incrementClick()">Click Me</button>
<button onclick="resetCounter()">Reset</button>
</div>
</center>
<script>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
3 Antworten
Mach den Teil der sich nicht verändert, also das "Text", in ein <span>-Element innerhalb des <h3> und die Zahl, die du hochzählst, in ein weiteres <span>-Element innerhalb des <h3>.
Wenn du dem span-Element, in welchem die Zahl steht, noch eine besondere Klasse gibst, z.B. "counter", dann kannst du mit JS (per .querySelector("span.counter") ) darauf zugreifen und die Zahl darin verändern, das "Test" bleibt hingegen einfach stehen da es sich in einem anderen Element befindet.
<div style="text-align: center;">
<h3 id="counter-label"><span>Text</span><span class="counter">0</span></h3>
<div>
<button onclick="incrementClick()">Click Me</button>
<button onclick="resetCounter()">Reset</button>
</div>
</div>
<script>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.querySelector("#counter-label > span.counter").innerHTML = val;
}
</script>
Wie von iNeedHelp961 bereits angemerkt gibt es das <center>-Element nicht mehr. Stattdessen kannst du in diesem Fall ein <div style="text-align: center;"> verwenden.
Es kann aber sein, dass ich mich nicht ganz missverständlich ausgedrückt habe.
Meinte Quasi, das wenn der Counter auf eins steht, dass ein Wort wie zum Beispiel "Milch" dort steht. Wenn ich auf "Weiter" und der Counter auf 2 springt, dass das Wort nun da steht, welches der Ziffer 2 zugeordnet ist. Beispielsweise mit if und else oder switch.
Wie so eine Art workflow sollte das sein, habe nur leider kein passendes Beispiel dafür, außer vllt die Iphone Apps, bei denen man beim erstmaligen öffnen Informationen angezeigt bekommt und immer auf den selben "Weiter-Button" klickt und mehrmals ein neuer Text erscheint.
Tu die Wörter in ein Array:
words = ["Milch", "Baum", "Tür", "Schuhe"];
und dann gib einfach das Wort aus, das am jeweiligen Index steht.
document.querySelector("span").innerText = words[counterVal];
Ich kann später den passenden Code posten, am Handy ist sowas ekelhaft. Aber du solltest wissen, man verwendet den <center> Tag nicht mehr. Den Grund dafür weiß ich nicht mehr genau, mach einfach mit CSS text-align: center
Den Grund dafür weiß ich nicht mehr genau
Weil man für das Styling der Website CSS verwenden sollte. Deswegen wurden solche Style-bezogenen Tags in HTML größtenteils abgeschafft.
Ich habe auf W3SCHOOL abgeschaut:
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>
<button onclick="myFunction()">Click me</button>
<p id="demo">"Test1"</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Test2";
}
</script>
</body>
</html>
Alles klar, vielen dank! Ich werde es gleich ausprobieren!