Change text on button if another div contains certain words

Question

 <span class="distance any-1-8 S-1-6 align-left" title="Avstand&nbsp;"><span>10</span> Km unna</span>
    <span class="delivery-time any-2-7 S-1-3 align-left" title="Leveringsinformasjon">Ikke på lager i valgt butikk. Bestillingen din vil bli sendt fra hovedlageret og kan hentes i butikken innen 3-7 dager. Du vil motta en SMS når ordren din er klar for henting.</span>
    <span class="any-1-6 S-1-1 align-right btn-container">
      <button type="button" data-selector="1019" title="Velg denne butikken" data-parsley-required="false" class="js-select-store btn-select-store el-button normal-btn align-center see-more">
        <span class="el-button-text">
          <span class="text">
            <span>Velg denne butikken</span>
          </span>
        </span>
      </button>
    </span>

Hi. I want to use jQuery to change the text on a CTA button, if the text in the div next to it contains "Ikke på lager..." (Don't need the whole string, only those 3 words can do). If it does not contain those words, I don't want any change. Basically: If text A exist --> change text B to "Blabla", if not --> do nothing

I want this change to only apply to the FIRST button coming after this div its searching for, because there are several buttons of the same class(it's a list).

Is this possible? Thanks.

Answer 1

When do you want the code to be executed? On Page load, on click on a buton or text?

First of all, add IDs to your spans. Then do sth like this:

 $('#clickme').click(function(){ if ($('#a').text().indexOf("Ikke på lager") >= 0){ $('#b').text('Blabla'); } });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <span id="clickme">click me</span> <br/> <span id="a">Ikke på lager i valgt butikk. Bestillingen din vil bli sendt fra hovedlageret og kan hentes i butikken innen 3-7 dager. Du vil motta en SMS når ordren din er klar for henting.</span> <br/> <span id="b">Velg denne butikken</span>