1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

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

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Jongens, 6. Dezember 2017.

  1. Jongens

    Jongens Grünschnabel

    Ich habe mehrere Absätze gleicher Klasse, möchte das innerHTML aller Absätze auslesen und nur das innerHTML des Absatzes mit dem Wert "111,11 €" ändern. Egal was ich probiere, es wird immer innerHTML aller Absätze geändert. Sorry für Fehler in meiner Anfrage, das ist meine allererste!

    Code (Javascript):
    1.   <p class="Streichpreis">128,00 €</p>
    2.   <p class="Streichpreis">175,00 €</p>
    3.   <p class="Streichpreis">111,11</p>
    4.   <p class="Streichpreis">139,00 €</p>
    5.   <p class="Streichpreis">142,00 €</p>
    6.   <p class="Streichpreis">126,00 €</p>
    7.    
    8. <script>
    9.    window.onload = function () {
    10.    var x = document.getElementsByClassName("Streichpreis");
    11.        if (x.innerHTML = "111,11 €") {
    12.            for (var i = 0; i <= x.length; i++) {
    13.            x[i].innerHTML = "Sonderpreis";
    14.            }
    15.        }
    16.    }
    17. </script>
     
  2. Kalito

    Kalito Erfahrenes Mitglied

    Hallo,

    was willst du den genau machen? Kommt der Wert nur einmal vor oder mehrmals?

    Code (Javascript):
    1. var Element= document.getElementsByClassName("Streichpreis");
    2. var searchText = "111,11 €";
    3. var found;
    4.  
    5. for (var i = 0; i < Element.length; i++) {
    6.   if (Element[i].textContent == searchText) {
    7.     found = Element[i];
    8.     break;
    9.   }
    10. }
    Die Lösung ist aber etwas dreckig.
     
  3. Jongens

    Jongens Grünschnabel

    Der Wert kann mehrmals vorkommen, aber ich weiß nicht, wie oft. Warum dreckige Lösung?


    (PS. ich glaube, ich muss auch noch eine Signatur anlegen?)
     
  4. Kalito

    Kalito Erfahrenes Mitglied

    Naja, ist halt reines Javascript. Nutzt du Jquery oder ähnliches?

    mit jquery würde es in etwa so aussehen:
    Code (Javascript):
    1.  var elements = $('.Streichpreis : contains("111,11 €")');
     
  5. Jongens

    Jongens Grünschnabel

    Mit jquery oder Ähnlichem kenne ich mich nicht aus und es wäre für diese kleine Manipulation wahrscheinlich auch etwas überdimensioniert. Kannst du mir bitte nochmals helfen, wie ich mit reinem Javascript diesen einen Inhalt ändern kann. Wenn ich deinen Code richtig interpretiere, sind bisher in dem doch nur die Elemente gespeichert, in denen der searchText enthalten ist. Wie müste es dann weitergehen?
     
  6. Jongens

    Jongens Grünschnabel

    Sorry, ich muss wohl die eckigen Klammern auskommentieren ...sind bisher in dem \[i\] doch nur die Elemente gespeichert...
     
  7. Jongens

    Jongens Grünschnabel

    Also, um es noch mal etwas verständlicher zu machen, ich möchte, dass das Script in allen Absätzen, in denen der Preis "111,11 €" drinsteht, diesen Preis mit dem Wort "Sonderpreis" überschreibt.
     
  8. EuroCent

    EuroCent KlappStuhl 2.0

    HTML:
    1. <p class="Streichpreis">128,00 €</p>
    2. <p class="Streichpreis">175,00 €</p>
    3. <p class="Streichpreis">111,11 €</p>
    4. <p class="Streichpreis">139,00 €</p>
    5. <p class="Streichpreis">142,00 €</p>
    6. <p class="Streichpreis">126,00 €</p>
    Code (Javascript):
    1. window.onload = function() {
    2.   var x = document.getElementsByClassName("Streichpreis");
    3.   var found;
    4.   for(var i = 0; i < x.length; i++) {
    5.     if(x[i].textContent = "111.11 €") {
    6.       found = x[i];
    7.       if(found) found.innerText = found.innerText + " Sonderpreis";
    8.     }
    9.   }
    10.  };
    unter jQuery wäre es so:
    Code (Javascript):
    1. var ele = $('.Streichpreis');
    2. var searchString = "111,11 €";
    3. var found;
    4.  
    5. for(var i = 0; i < ele.length; i++) {
    6.   if(ele[i].innerText == searchString) {
    7.     found = ele[i];
    8.     found.innerText = found.innerText + " Sonderpreis";
    9.   }
    10. }
     
    Zuletzt bearbeitet: 6. Dezember 2017
  9. Jongens

    Jongens Grünschnabel

    Mir würde ja schon weiterhelfen, wenn ich wüsste, warum mein Code nicht funktioniert. Die for-Schleife steht innerhalb einer if_Anweisung, sollte den Code also nur abarbeiten, wenn die if-Bedingung erfüllt ist. Merkwürdigerweise kann in der Anweisung auch irgendetwas anderes stehen, z.B. ... if (x.innerHTML = "Irgendwas") ... und trotzdem werden alle innerHTML zu "Sonderpreis" geändert. Es scheint also, dass die if-Bedingung gar nicht berücksichtigt wird.
     
  10. EuroCent

    EuroCent KlappStuhl 2.0

    Naja du musst erst die For-Schleife generieren dann die Abfrage :)
    Vorher bringt es ja nichts :D

    PS: Nimm die Jquery Variante ist einfacher :)

    Link zum Test: https://codepen.io/EuroCent/pen/gXJMZZ
     
  11. Jongens

    Jongens Grünschnabel

    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.
     
  12. EuroCent

    EuroCent KlappStuhl 2.0

  13. Jongens

    Jongens Grünschnabel

    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!
     
  14. EuroCent

    EuroCent KlappStuhl 2.0

    Kein Problem :)
    Naja bei jQuery vereinfacht JS einfach um mengen und bringt etliche Funktionen mit sich :)

    Zur Erklärung:
    Code (Javascript):
    1. var ele = $('.Streichpreis'); // Auslesen der Klasse Streichpreis in bezug auf <p></p>
    2.  
    3. var searchString = "111,11 €"; // String als Wert der gesucht werden soll
    4.  
    5. var found; // Gefundene Objekte hier lagern/speichern
    6.  
    7. // Suche in der Schleife solange nach ele bis die maximale länge von ele erreicht ist
    8. for(var i = 0; i < ele.length; i++) {
    9.  
    10.   // Suche nach einem String der den selbigen Wert wie searchString besitzt
    11.   if(ele[i].innerText == searchString) {
    12.  
    13.     // String gefunden, dann in found speichern
    14.     found = ele[i]; // ele[i] ist der gefundene Wert in searchString
    15.  
    16.     // found mittels innerText den Wert zusätzlich um einen String erweitern
    17.     found.innerText = found.innerText + " Sonderpreis";
    18.   }
    19. }
     
  15. DerKleene1

    DerKleene1 Mitglied

    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:
    1. <!doctype html>
    2. <html lang="de">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>Test1</title>
    6.   </head>
    7.   <body>
    8.     <p class="Streichpreis">128,00 €</p>
    9.     <p class="Streichpreis">175,00 €</p>
    10.     <p class="Streichpreis">111,11 €</p>
    11.     <p class="Streichpreis">139,00 €</p>
    12.     <p class="Streichpreis">142,00 €</p>
    13.     <p class="Streichpreis">126,00 €</p>
    14.  
    15.   </body>
    16.  
    17. Hier der Java Code rein, siehe unten
    18. </html>
    Code (Java):
    1.   <script>
    2.     window.onload = function() {
    3.         var x = document.getElementsByClassName("Streichpreis"); //Welche Klasse soll gesucht werden
    4.         for(var i = 0; i < x.length; i++) { //Schleife bilden, solange bis alle Klassen die oben gesucht wurde durch sind
    5.             if(x[i].textContent == "111,11 €") { //Wenn der String enthalten ist dann hier rein und ihn ändern
    6.                 //x[i].textContent = "Sonderpreis"; //Falls nur Sonderpreis dastehen soll
    7.                 x[i].textContent = x[i].textContent + " Sonderpreis"; //Enthaltener Preis + Sonderpreis
    8.             } //END IF
    9.         } //END FOR
    10.     }; //END WINDOW
    11. </script>
    Hoffe das dies auch ein wenig hilft.
     
  16. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Viel jQuery ist das aber nicht ;) Wenn man es richtig anwendet, ist es ein Einzeiler:
    Code (Text):
    1.     <p class="Streichpreis">128,00 €</p>
    2.     <p class="Streichpreis">175,00 €</p>
    3.     <p class="Streichpreis">111,11 €</p>
    4.     <p class="Streichpreis">139,00 €</p>
    5.     <p class="Streichpreis">111,11 €</p>
    6.     <p class="Streichpreis">126,00 €</p>
    7.     <script>
    8.         $(".Streichpreis:contains('111,11 €')").text("Sonderpreis");
    9.     </script>
     
  17. Jongens

    Jongens Grünschnabel

    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.
     
  18. Jongens

    Jongens Grünschnabel

    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.
     
Die Seite wird geladen...