Div auslesen und anderes ändern

[Lisa_33]

Hallo an Euch Alle,

ich brauche mal wieder eure Hilfe, weil ich keine Ahnung habe, ob das überhaupt geht, was ich vorhabe...

Ist es möglich, ein DIV auszulesen und je nachdem, was da für ein Inhalt drin steht, den Inhalt eines anderen DIVs zu ändern?

Hab schon kleine Fortschritte gemacht, wie z.B. per JS die Farbe der Schrift zu ändern, aber das wirkliche Hintergrundwissen
fehlt mir leider noch.

Ich wäre euch dankbar für jeden Tipp, wie ich das realisieren kann.

LG
Lisa

[AndreasB]

Ja, das ist möglich.
Jedoch ohne Code oder konkreten Anwendungfall, kann dir da kaum jemand konkret helfen.

Ich skizziere mal, wie das ablaufen könnte:
Du könntest dir mit innerText

Code:

const content = firstDiv.innerText

 den "Inhalt" eines div Elements auslesen.

Dann könntest du mit include schauen, ob der gesucht String drin ist:

Code:

const isMatch = content.include('gesuchter Text')

Und wenn der Text mit dem gesuchten übereinstimmt, könntest du was mit innerText in das andere div reinschreiben:

Code:

if (isMatch) {
  secondDiv.innerText = 'war drinnen'
}

Das ist aber nur ein ganz einfacher Weg, wie du das machen kannst.
Für Konkrete Hilfe, benötigen wir mehr Informationen.

[Lisa_33]

Vielen Dan schon mal, Andreas.
Das hilft mir schon mal weiter...

Hier mehr Infos:
Eine Freundin betreibt einen online-Shop bei dem im Footer im DIV entweder "... inkl. MwSt. ..." oder "... excl. MwSt. ..." steht.
Je nachdem, ob der Besucher eingeloggt ist, oder nicht. Das DIV hat den Namen "footer-vat" und ich sehe es im Quelltext.
In einem anderen DIV "price" soll dann eben je nachdem hinter dem Preis inkl. oder exkl. stehen.

Ich habe mich mit dem Shopware-Shop befasst, aber hier im Code etwas zu ändern traue ich mir nicht zu.
Allerdings habe ich ein Plugin entdeckt, das Javascript ermöglicht und hier habe ich z.B. folgenden Code eingestellt:

var meineElemente = document.getElementsByClassName('footer-vat');
for(var i = 0; i < meineElemente.length; i++) {
meineElemente[i].style.color = 'red';   
}

Tatsächlich funktioniert das und macht den Text rot, aber meine JS-Kenntnisse sind leider (noch) sehr
oberflächlich und ich komme einfach nicht weiter.

LG
Lisa

[Lisa_33]

Hey Andreas,
schau dir das bitte mal an.
So in etwa sollte es doch klappen, oder?
Aber ich komme einfach mit der Syntax nicht klar. Sorry:-).


<script>
const content = document.getElementByClassName("footer-vat");
const isMatch = content.include('Alle');

if (isMatch) {
product-price.innerHTML = 'war drinnen';
}
</script>

[Sempervivum]

Ich bin zwar nicht Andreas, aber ich denke, ich kann dir da auch weiter helfen.
Dein Ziel ist ja, in dem div "price" die Angabe "inkl. MwSt" oder "exkl. MwSt" hinzu zu fügen. Um das exakt zu tun, ohne dass es an die falsche Stelle gerät, muss man wissen, wie der Text in diesem div genau aussieht. Dann kann man es sicher mit einem replace mit einer Regex als Suchmuster erledigen.
Poste am besten den Text in diesem div.

[Lisa_33]

Hallo Sempervivum,

vielen Dank dir:-)!

So sieht der Quelltext aus:

*******************************************************************************
<div class="product-price-info">
<p class="product-price-unit"></p>
<div class="product-price-wrapper">
<div class="product-cheapest-price"></div>
<span class="product-price">124,95 €*</span>
</div>
</div>



<div class="footer-vat">
<p>* Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. <a data-ajax-modal="true" href="/widgets/cms/fbb107995b2942ee84ea8dd4036f595a" data-url="/widgets/cms/fbb107995b2942ee84ea8dd4036f595a">Versandkosten</a> und ggf. Nachnahmegebühren, wenn nicht anders angegeben.</p>
</div>

*******************************************************************************

Entweder steht im unteren Text "inkl." oder "exkl."

In "product-price" habe ich es per CSS ::after) hinbekommen, dass zumindest schon mal drin steht "124,95 €* inkl. 19% MwSt.".
Aber es wäre natürlich toll, wenn im unteren Text "exkl." steht, dass dann auch beim Preis steht "124,95 €* zzgl. 19% MwSt.".

Vielen Dank für deine Hilfe und einen schönen Tag.

Lisa

[Sempervivum]

Guten Morgen Lisa,
dieses Javascript müsste es tun:

Code:

        const
            footerVat = document.querySelector('.footer-vat p'),
            productPrice = document.querySelector('.product-price');
        let addTxt = '';
        if (footerVat.textContent.includes('Alle Preise inkl.')) {
            addTxt = ' inkl. 19% MwSt.';
        }
        if (footerVat.textContent.includes('exkl.')) {
            addTxt = ' zzgl. 19% MwSt.';
        }
        productPrice.insertAdjacentHTML('beforeend', addTxt);

[Lisa_33]

Vielen herzlichen Dank, Sempervivum. Du bist klasse:-).
Das funzt!!

Auf der Seite habe ich eine Liste von Produkten (Kacheln).
In jeder Kachel ist "product-price", aber nur in der ersten wird der Text angezeigt.
Wie kann ich es machen, dass der Text in JEDEM <span class="product-price"></span>
angezeigt wird? Ist bestimmt nur ne Kleinigkeit, aber ich bekomm's nicht hin.

Ich freue mich echt. Du hast meinen Tag gerettet. Danke.
LG
Lisa

[Sempervivum]

Aber den "footer-vat" gibt es nur ein Mal, nicht wahr?

[Lisa_33]

Ja, footer-vat ist nur einmal auf der Seite.