✔ innerHTML abhängig von einem bestimmten Werte/Inhalt ändern

Vielen Dank EuroCent, aber leider tut dein Script nicht das, was ich erreichen möchte. Anstatt die richtige Stelle zu ändern, ersetzt es den ersten Preis (128,00 €), aber gerade die gewünschte Stelle (111,11 €) bleibt so wie sie ist. Wenn ich das break; weglasse, ändert das Script ALLE textContents zu "Sonderpreis". Ich möchte aber, dass mehrere Absätze mit dem textContent = "111.11 €" zu "Sonderpreis" geändert werden, die anderen Preise jedoch nicht. An dieser Nuss beiße ich mir schon seit einigen Tagen die Zähne aus.
 
Wow EuroCent, mit der Jquery Variante geht's! Bei mir lösen sich gerade sämtliche Hirnkrämpfe. Ich hätte zwar gerne eine reine Javascript Lösung gehabt um sie auch zu verstehen (bei Jquery versteh ich nur noch Bahnhof). Aber ich bin dir wirklich sehr, sehr dankbar für deine Hilfe!
 
Kein Problem :)
Naja bei jQuery vereinfacht JS einfach um mengen und bringt etliche Funktionen mit sich :)

Zur Erklärung:
Code: 
var ele = $('.Streichpreis'); // Auslesen der Klasse Streichpreis in bezug auf <p></p>

var searchString = "111,11 €"; // String als Wert der gesucht werden soll

var found; // Gefundene Objekte hier lagern/speichern

// Suche in der Schleife solange nach ele bis die maximale länge von ele erreicht ist
for(var i = 0; i < ele.length; i++) {

  // Suche nach einem String der den selbigen Wert wie searchString besitzt
  if(ele[i].innerText == searchString) {

    // String gefunden, dann in found speichern
    found = ele[i]; // ele[i] ist der gefundene Wert in searchString

    // found mittels innerText den Wert zusätzlich um einen String erweitern
    found.innerText = found.innerText + " Sonderpreis";
  }
}
 
Wenn dir reines JS lieber ist, was ich auch besser finde für so eine kleine Anwendung, dann braucht man nicht JQuery komplett laden.
Hier bitte, ich denke das Du dies verstehen wirst, nach der Erklärung oben:
HTML: 
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Test1</title>
  </head>
  <body>
    <p class="Streichpreis">128,00 €</p>
    <p class="Streichpreis">175,00 €</p>
    <p class="Streichpreis">111,11 €</p>
    <p class="Streichpreis">139,00 €</p>
    <p class="Streichpreis">142,00 €</p>
    <p class="Streichpreis">126,00 €</p>
 
  </body>

Hier der Java Code rein, siehe unten
</html>
Java: 
  <script>
    window.onload = function() {
        var x = document.getElementsByClassName("Streichpreis"); //Welche Klasse soll gesucht werden
        for(var i = 0; i < x.length; i++) { //Schleife bilden, solange bis alle Klassen die oben gesucht wurde durch sind
            if(x[i].textContent == "111,11 €") { //Wenn der String enthalten ist dann hier rein und ihn ändern
                //x[i].textContent = "Sonderpreis"; //Falls nur Sonderpreis dastehen soll
                x[i].textContent = x[i].textContent + " Sonderpreis"; //Enthaltener Preis + Sonderpreis
            } //END IF
        } //END FOR
    }; //END WINDOW
</script>

Hoffe das dies auch ein wenig hilft.
 
unter jQuery wäre es so:
Code (Javascript):
  1. var ele = $('.Streichpreis');
  2. var searchString = "111,11 €";
  3. var found;

  5. for(var i = 0; i < ele.length; i++) {
  6. if(ele.innerText == searchString) {
    [*] found = ele;
    [*] found.innerText = found.innerText + " Sonderpreis";
    [*] }
Zum Vergrößern anklicken....
Viel jQuery ist das aber nicht ;-) Wenn man es richtig anwendet, ist es ein Einzeiler:
Code: 
    <p class="Streichpreis">128,00 €</p>
    <p class="Streichpreis">175,00 €</p>
    <p class="Streichpreis">111,11 €</p>
    <p class="Streichpreis">139,00 €</p>
    <p class="Streichpreis">111,11 €</p>
    <p class="Streichpreis">126,00 €</p>
    <script>
        $(".Streichpreis:contains('111,11 €')").text("Sonderpreis");
    </script>
 
Also nochmals allen vielen Dank für eure Hilfsbereitschaft. Ich werd mir alles anschauen und entscheiden, welche Lösung für mich die bessere ist. Mindestens eine funktioniert ja schon.
 
Also, jetzt hab ich mir mal angeschaut, warum die reine Javascript Lösung von EuroCent zunächst nicht funktioniert hat. In der Zeile (if(x.textContent = "111.11 €")) stecken zwei kleine Fehler drin. Das Script funktioniert, wenn ich den Dezimalpunkt entsprechend der Schreibweise in den Absätzen durch das Komma ersetze und wenn ich in derselben Zeile als Vergleichsoperator das doppelte Gleichheitszeichen verwende.

Das Script funktioniert zwar mit der Variablen "var found", aber sie wird eigentlich gar nicht benötigt. Wenn man sie weglässt und das Script entsprechend anpasst, ist es identisch mit der JS Lösung von DerKleene1. Die reine JS Lösung funktioniert also auch und ist mir für meinen Zweck lieber, weil ich JQuery nicht laden muss.

Euch beiden, EuroCent und DerKleene1, Respekt und vielen Dank für die ausführlichen Kommentare im Jquery- und JS-Code. Die haben mich wirklich ein gutes Stück weitergebracht!

Ich werd mich jetz noch schlau machen, worin genau die Unterschiede zwischen innerHTML, innerText und textContent bestehen, aber das kann man ja nachschlagen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück