Change text on button if another div contains certain words - javascript

<span class="distance any-1-8 S-1-6 align-left" title="Avstand "><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.

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>

Related

Watir Click JS Button

I can't seem to get past a button in a landing page. Here is the JS element with parent nodes:
<div class="modal-body-content callfor-popup">
<h3>Welcome | Bienvenue</h3>
<p class="body_M_normal" aria-level="4" role="heading">Please select a language | Veuillez sélectionner une langue</p>
<div class="small_btn lcbo_cookie">
<a class="body_M_normal" href="https://www.lcbo.com/en/stores/store/redirect/___store/en/___from_store/en/uenc/aHR0cHM6Ly93d3cubGNiby5jb20vZW4v/">English</a>
</div>
<div class="small_btn lcbo_cookie">
<a class="body_M_normal" href="https://www.lcbo.com/en/stores/store/redirect/___store/fr/___from_store/en/uenc/aHR0cHM6Ly93d3cubGNiby5jb20vZnIv/">Français</a>
</div>
<hr>
<p class="caption_xxs_noletterspace">
You must be 19 years of age to purchase alcohol. Please note that we only deliver in Ontario / Vous devez avoir au moins 19 ans pour acheter de l'alcool. Veuillez noter que nous ne livrons pas à l'extérieur de l’Ontario.
</p>
</div>
This is what I am currently trying:
puts '1' if a.element(visible_text: 'English').exist?
puts '2' if a.link(visible_text: 'English').exist?
puts '3' if a.button(text: 'English').exist?
puts '4' if a.link(visible_text: 'English').exist?
puts '5' if a.element(visible_text: 'English').exist?
a.button(text: 'English').click
a.element(visible_text: 'English').click
a.link(visible_text: 'English').click
puts "clicks finished"
1, 2, 4 and 5 show up, indicating Watir knows they are there and exist. I can't seem to click that element though. It's not a formal HTML button, so that's why I'm trying several elements.
Is there a better way of dealing with such JS elements? I'm not sure how to focus on the English option.

Removing all language tags from InDesign file

When I export my InDesign file that I was given by a designer to HTML there are hundreds of language span tags scattered all over the place. Example below.
How can I remove these language spans from the InDesign file instead of having to remove them manually from the HTML file.
<p>
<span lang="fr-FR"><a id="_idTextAnchor002"></a>En cherchant </span
><span lang="ar-SA">à </span
><span lang="fr-FR"
>appuyer un élève, certains pédagogues interviennent personnellement et
posent des gestes inappropriés<a id="_idTextAnchor003"></a>. D’autres –
aussi rares soient-ils – ne se préoccupent pas du bienêtre de l’</span
><span lang="ar-SA">élève, mais </span><span lang="fr-FR">cherchent</span
><span lang="ar-SA"> délibérément</span><span lang="fr-FR"> à le </span
><span lang="ar-SA">«</span><span lang="fr-FR">conditionner</span
><span lang="ar-SA">»</span
><span lang="fr-FR"> dans le but d’entretenir </span
><span lang="ar-SA">éventuellement </span
><span lang="fr-FR"
>une relation de nature sexuelle. <a id="_idTextAnchor004"></a>Souvent, ce
mécanisme, que nous appellerons «pédopiégeage» (</span
><span lang="fr-FR">grooming</span
><span lang="fr-FR"
>, en anglais), ne peut être mis au jour qu’après coup, par la police,
l’employeur, l’Ordre et les victimes elles-m</span
>ê<span lang="fr-FR">mes. </span>
</p>
the following one-line AppleScript will remove all language attributes from text in an InDesign layout.
tell application "Adobe InDesign 2020" to set applied language of text style ranges of stories of document 1 to (item 1 of languages of document 1 whose name is "[No Language]")

element.click() is not emulating the click

document.querySelectorAll('button:nth-child(2)').click()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="Dialog ui-dialog-type-message" style="min-width: 300px;"><header><h1 class="dialog-title">Pile Nouveaux éléments pleine</h1></header><div class="dialog-body"><p class="dialog-msg">Vous ne pouvez pas acheter cet élément car vous avez 5 éléments ou plus dans votre pile d'éléments non attribués.</p><div class="ut-button-group"><button class=""><span class="btn-text">Annuler</span><span class="btn-subtext"></span></button><button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button></div></div></section>
I'm making a chrome extension and i'm looking to click on the following button :
<button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button>
On the console with query selector i've got the element :
document.querySelectorAll('button:nth-child(2)')[4]
It is the right button, every thing is good so far but when i add .click() after the element like so, the element doesn't get clicked either:
document.querySelectorAll('button:nth-child(2)')[4].click()
How can i get this to click on my button ?

Alert box to accept cookies in a web site

I wanna know how to put a .js code in a button that it's in a bootstrap alert that when the user clicked accept, the alert box no appear again.
Thanks a lot.
This is the code that I have, but doesn't work.
JS:
$(".btn_cerrar").on({
click: function(){
location.reload(
$(".pb-element-alert").hidden();
});
});
<div id="modal">
<p style="text-align: center;">Este sitio web emplea cookies para ofrecerle un servicio más</p>
<p> personalizado.</p>
<p style="text-align: center;">Si continúa navegando entenderemos que acepta nuestra</p>
<p style="text-align: center;"><a title="Politicas" href="images/eventos/POLITICA_DE_TRATAMIENTOS_DE_DATOS.pdf" target="_blank"><strong>Políticas de tratamiento de la información</strong></a> de nuestro sitio web.</p>
<button class=" btn_cerrar btn pull-right btn-success" type="button" data-dismiss="alert"> Aceptar</button></div>
HTML:
`
Este sitio web emplea cookies para ofrecerle un servicio más
 personalizado.
Si continúa navegando entenderemos que acepta nuestra
Políticas de tratamiento de la información de nuestro sitio web.
Aceptar
`
I am not sure what exactly is the alert you are talking about since it is not shown in your html.
The correct syntax of your script should be that:
$(".btn_cerrar").on('click', function(){
// Do what you want.
});
Now if the element you want hide can be selected from the selector $(".pb-element-alert") you mention in your question then you can use this:
$(".pb-element-alert").hide();
All of it together would be:
$(".btn_cerrar").on('click', function(){
$(".pb-element-alert").hide();
});
UPDATE
$( document ).ready(function() {
bool isBtnClicked = sessionStorage.getItem('buttonClicked') == true;
if(isBtnClicked){
$(".pb-element-alert").hide();
}
});
$(".btn_cerrar").on('click', function(){
sessionStorage.setItem('buttonClicked', true);
$(".pb-element-alert").hide();
});

use id attribute as reference or variable for tooltip

I am currently using this code .
However the text I wish to display must be in one line, and if there is a apostrophe ( ' ) in the text, it will not work anymore .
imgover(this, 'Text to display')
Is there a way to remplace the second variable of onmouseover by an id of a div so that it will display everything in the div please ?
Here is an example of the div :
<div id ="text1" >
<em><img class="floatLeft" src="images/F9979.jpg" alt="" />
TITRE DU FILM : Man of Steel
<br />
<br />
RESUME :
Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane
<br />
<br />
DUREE : 2H23
<br />
Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
</em>
</div>
I would like to remplace 'Text to display' from
imgover(this, 'Text to display')
by what's in the div (text1) so that at the place where there is the div ( tooltip) I will see the text and the image from the div ( text1).
I'm not really sure whether I understood your question properly but this should work. You need to put the value of the id tag of your html element in the parameter of getElementById
<script>
function imgover(img, tip) {
document.getElementById('text1').style.display = 'block';
document.getElementById('text1').innerHTML = tip;
document.getElementById('text1').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('text1').style.display = 'none';
}
</script>

Categories

Resources