Wie ändere ich einen Paragraph indem ich einen Button benutze mithilfe von HTML und Javascript?

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

2 Antworten

siliciumcarbid3

15.05.2023, 17:33

Mit diesem Code kannst du das umsetzen, was du beschrieben hast:

<!DOCTYPE html>
<html>
    <head>
        <title>Wechselnde Inhalte</title>
		
        <script>
	        inhalte = [
	        	"Saab",
	        	"Volvo",
	        	"BMW"
	        ];
	        
	        aktuellerInhalt = 0;
	        
	        function inhaltWechseln() {
		        
		        if(aktuellerInhalt <= inhalte.length-2) {
			        aktuellerInhalt++;
		        } else {
			        aktuellerInhalt = 0;
		        }
		        
		        document.getElementById("wechselnderInhalt").innerHTML = inhalte[aktuellerInhalt];
		        
	        }
        </script>
    </head>
    <body>
	    <h1>Wechselnde Inhalte</h1>
	    <p>Inhalt: <span id="wechselnderInhalt">Saab</span></p>
	    <p>
		    <a href="javascript:inhaltWechseln();">jetzt wechseln</a>
	    </p>
    </body>
</html>

Da du sagst, du bist Anfänger, erkläre ich die Ansätze. Es gibt ja immer verschiedene Wege, um ein Ziel zu erreichen. Der Ansatz von PWolff ist natürlich auch eine Möglichkeit. Ich persönlich würde es so oder so ähnlich machen:

Innerhalb von <script> gibt es den Array "inhalte". Falls du noch nicht wusstest, wie ein Array funktioniert, weißt du es jetzt. Dieser enthält die Inhalte und kannst du beliebig nach dem vorhandenen Schema erweitern.
JavaScript muss wissen, welcher der Einträge grade angezeigt wird. Das wird in der Variable "aktuellerInhalt" gespeichert. Der erste Eintrag im Array ist immer null, nicht eins. Darum ist der Wert auf null und weiter unten im html-Code steht auch schon der erste Eintrag als sogenannter hardcode.
In der Funktion inhaltWechseln() wird definiert, welcher Array-Eintrag (index) als nächstes kommt. "inhalte.length" gibt die Länge des Arrays zurück. Da die Zählung aber bei null beginnt muss noch -2 hinten dran. Mit etwas basteln kannst du nachvollziehen, was ich damit meine. Oder du weißt es schon.
Mit der Zeile "document.getElementById..." wird im html-Code nach einem Tag mit der ID "wechselnderInhalt" gesucht und dort wird der jeweils nächste Eintrag aus dem Array eingetragen.
Im html-Code ist dann nur noch ein Tag mit der ID "wechselnderInhalt". Du wolltest das im Paragraphen machen. Das geht natürlich sinngemäß auch. Über den Link wird die JavaScript-Funktion ausgeführt (falls du noch nicht wusstest, wie man das auch ohne "onClick" machen kann).

PWolff

14.05.2023, 22:32

Am einfachsten wäre es vermutlich, für jeden Text einen eigenen Absatz zu nehmen und alle bis auf den ersten auszublenden (display:none). Die IDs davon z. B. "text1", "text2", ...

<p id="text12" style="display:none;">Hier steht der zwölfte Text</p>

und ein verstecktes Feld (etwa <input type="hidden" id="textIndex" value="1" />).

Beim Handler für das Click-Ereignis des Buttons:

Wert von document.getElementById("textIndex") auslesen
mit Number.parseInteger() in eine Zahl "index" umwandeln
Element mit id ("text" + index) verstecken (element.style.display="none";)
index erhöhen
Wert von index in Element mit id "textIndex" schreiben
Element mit id ("text" + index) sichtbar machen (element.style.display="initial"; o. Ä.)

Man kann natürlich auch alle Elemente durchgehen und nachsehen, welches sichtbar ist, und dann dieses ausblenden und das nächste einblenden.

Oder man setzt die Texte in ein Array und wählt bei jedem Klick den nächsten Array-Index (in einer Produktivumgebung würde man die Texte dann aus einer Datei einlesen, dann kann man sie am einfachsten ändern).

Yannik596

Fragesteller

14.05.2023, 22:43

Ihre Tipps sind sehr hilfreich. Das Problem ist jedoch, dass ich grade anfange HTML und JS zu lernen und das leider noch nicht mit Arrays etc umsetzen kann. Hatte dazu Quellcodes im Internet durchsucht, aber leider nichts gefunden. Aber danke für die Hilfreichen Tipps.

PWolff

14.05.2023, 22:45

@Yannik596

Für den Anfang wäre es vermutlich besser, erst einmal mit 2 Texten anzufangen, die abwechselnd angezeigt werden.

Yannik596

Fragesteller

14.05.2023, 22:44

https://shill-army.vercel.app/
Ich versuche das nachzubauen

Ähnliche Fragen

Button in html?

Wie erstelle ich Button in html die man nach links verschieben kann und wenn ein anderer verschoben wird, dass der andere wieder zurück in die ursprüngliche Lage geht.

Wenn möglich sollte der Code (html, css und javascript) möglichst kurz sein und für PC sowie mobile Geräte verfügbar sein.

Danke

...zur Frage

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Paragraphen mit Button in JS ausblenden?

Kann mir jemand sagen, wie ich mit dem vorgegebenen Code (ich darf nichts ändern, sondern nur die function ergänzen) die Paragraphen ausblenden kann?

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Wie kann ich bei html einen springenden Button machen?

Ich möchte das wenn man mit dem Mauszeiger über den button geht, das der button sich dann verschiebt sodass man ihn nie drücken kann... also wie so eine art spiel... kann mir jemand den code schreiben ? Danke im vorraus.

...zur Frage

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

Javascript Bilder per Knopf austauschen?

Ich will in meiner Website ein Bild einfügen, welches man per Knopfdruck austauschen kann. Ich habe den Code von dieser Website benutzt http://droeppez.de/download/js-tut/js-tut/tutorial/bilder1.html).

Auf meiner Website ist oben links ein Bild mit dem Logo und weiter unten das Bild was ausgetauscht werden soll. Will ich jetzt das Bild ändern, ändert sich das Logo oben in der Ecke und nicht das Bild was sich eigentlich ändern soll. Die Knöpfe funktionieren aber.

Meine Frage ist nun kann man das Bild was sich eigentlich ändern soll, irgendwie auswählen, damit sich nur das bestimmte Bild ändert?

ps. Bin noch neu und kenn mich nicht so gut aus.

...zur Frage

Seite wird bei Weiterleitung nicht richtig angezeigt?

Hey,

Ich programmiere gerade etwas in PHP, CSS, HTML, JS... Ich habe ein Button gemacht und wenn mann auf ihn clickt soll mann weitergeleitet werden (JavaScript Funktion).

Die Weiterleitung funktioniert aber wenn mann auf der Seite ist wird nur der PHP Quell text angezeigt...

Ich bitte um hilfe!

Code:

JavaScript Weiterleitung:

<script type="text/javascript">
window.location = "login.php";
</script>

Button:

<form action="weiterleitung-login.html" method="post" class="buttons"><input type="submit" value="Einloggen" class="login"></form>

MfG Dominik

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen