Why is html text not changing after detecting website language? - javascript

I am trying to create a banner for an AB testing. The problem is that my code has to recognize the languague on the pace (English or french) and change to the right languague:
I have created the following function but it is not working.
var lang = document.querySelector('html').getAttribute('lang'),
title = '',
subtitle = '',
ctaText = '';
if (lang === 'en-be') {
title = 'Collect points everyday and redeem them for rewards!';
subtitle = 'Choose an activity below to start earning points or if you already have them, redeem now!';
ctaText = "GO TO REWARDS >";
init();
} else if (lang === 'fr-be') {
title = 'Accumulez des points tous les jours et échangez-les contre des récompenses!';
subtitle = 'Choisissez une des activités ci-dessous pour commencer à accumuler des points. Si vous en avez déjà, échangez-les dès maintenant!';
ctaText = "VOIR LES RÉCOMPENSES >";
init();
}
var croContent = `
<div class="cro-abtest">
<div class="cro-banner">
<div>
<div>` + title + `</div>
<div>` + subtitle + `</div>
</div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1d7669ff63d900ae5a6.png">
<div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1da669ff63d900ae5a7.png">
` + ctaText + `
</div>
</div>
</div>
`;
var croCA = document.querySelector("#root > div > div > div > div > div:nth-child(3)");
croCA.insertAdjacentHTML('beforebegin', croContent);
var croCSS = '<style> .cro-abtest {max-width: 1280px;margin-left: auto;margin-right: auto;} .cro-banner {display:flex;flex-direction:row;justify-content:center;align-items: center;border: 1px solid #707070;margin:25px 0px;font-family:Roboto;padding: 25px;} .cro-banner > div:nth-child(1) > div:nth-child(1) {color: #0EB0A7;font-weight:500;font-size: 1.875rem;} .cro-banner > div:nth-child(1) > div:nth-child(2) {color: #888888;} .cro-abtest > div > img:nth-child(2){width:40rem;;height: 10rem;} .cro-abtest > div > div:nth-child(3) > img {display:none;} .cro-abtest > div > div:nth-child(3) > a {background: #0EB0A7;padding: 5px 10px;border-radius: 1px;color: white;white-space: nowrap;} .cro-abtest > div > div:nth-child(1) {width:25rem;} #media screen and (max-width: 1200px) {.cro-abtest > div > img{width:30rem;;height: 7rem;} .cro-banner > div:nth-child(1) > div:nth-child(1) {font-size: 1.125rem;}} #media screen and (max-width: 800px) {.cro-banner{flex-direction: column;} .cro-abtest > div > div:nth-child(1) {width:100%;} .cro-abtest > div > div:nth-child(3) {display:flex;align-items:center;}.cro-abtest > div > img:nth-child(2) {display:none;} .cro-abtest > div > div:nth-child(3) > img{display: block;width: 176px;height: 82px;}}</style>'
croCA.insertAdjacentHTML('beforebegin', croCSS);
When the user in their account has english, the function has to recognize document.querySelector('html').getAttribute('lang') as english and add the english text but if the account has french in is configuration it should be replaced by the french text
Anyone knows where i am mistaken?


Without you posting the HTML i created a simple html and it's working for me:
<html lang="en-be">
<head>
<title>demo</title>
<script>
function banner() {
var lang = document.querySelector('html').getAttribute('lang'),
title = '',
subtitle = '',
ctaText = '';
if (lang === 'en-be') {
title = 'Collect points everyday and redeem them for rewards!';
subtitle = 'Choose an activity below to start earning points or if you already have them, redeem now!';
ctaText = "GO TO REWARDS >";
} else if (lang === 'fr-be') {
title = 'Accumulez des points tous les jours et échangez-les contre des récompenses!';
subtitle = 'Choisissez une des activités ci-dessous pour commencer à accumuler des points. Si vous en avez déjà, échangez-les dès maintenant!';
ctaText = "VOIR LES RÉCOMPENSES >";
}
var croContent = `
<div class="cro-abtest">
<div class="cro-banner">
<div>
<div>` + title + `</div>
<div>` + subtitle + `</div>
</div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1d7669ff63d900ae5a6.png">
<div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1da669ff63d900ae5a7.png">
` + ctaText + `
</div>
</div>
</div>
`;
var croCA = document.querySelector("p");
croCA.insertAdjacentHTML('beforebegin', croContent);
var croCSS = '<style> .cro-abtest {max-width: 1280px;margin-left: auto;margin-right: auto;} .cro-banner {display:flex;flex-direction:row;justify-content:center;align-items: center;border: 1px solid #707070;margin:25px 0px;font-family:Roboto;padding: 25px;} .cro-banner > div:nth-child(1) > div:nth-child(1) {color: #0EB0A7;font-weight:500;font-size: 1.875rem;} .cro-banner > div:nth-child(1) > div:nth-child(2) {color: #888888;} .cro-abtest > div > img:nth-child(2){width:40rem;;height: 10rem;} .cro-abtest > div > div:nth-child(3) > img {display:none;} .cro-abtest > div > div:nth-child(3) > a {background: #0EB0A7;padding: 5px 10px;border-radius: 1px;color: white;white-space: nowrap;} .cro-abtest > div > div:nth-child(1) {width:25rem;} #media screen and (max-width: 1200px) {.cro-abtest > div > img{width:30rem;;height: 7rem;} .cro-banner > div:nth-child(1) > div:nth-child(1) {font-size: 1.125rem;}} #media screen and (max-width: 800px) {.cro-banner{flex-direction: column;} .cro-abtest > div > div:nth-child(1) {width:100%;} .cro-abtest > div > div:nth-child(3) {display:flex;align-items:center;}.cro-abtest > div > img:nth-child(2) {display:none;} .cro-abtest > div > div:nth-child(3) > img{display: block;width: 176px;height: 82px;}}</style>'
croCA.insertAdjacentHTML('beforebegin', croCSS);
}
</script>
</head>
<body onload="banner();">
<p>placeholder.</p>
</body>
</html>
Below are the generated banners respectively for english and french:
jsfiddle

Related

Javascript ">=" giving false when is true [duplicate]

This question already has answers here:
compare two input values in input validation html javascript?
(3 answers)
Closed 5 months ago.
I have this vars:
var LC = $('#a').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value,
ES = $('#b').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value,
VK = $('#c').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value,
SPY = $('#d').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value,
CL = $('#e').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value;
I noticed that whenever there were 2 digits each variable returns true or false correctly. But when I get to the hundreds, the variables return false wrongly (I think).
For example for the var CL if $('#e').text() equals 64 and document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value equals 3 returns true.
But if the first returns 164 and the second still 3 will return false.
I can't understand why. Tried to google it but I didn't find anything. I may not be looking for the right terms tho (sorry).
My javascript is not excellent, I learned it myself to automate some things that make my life easier. If anyone can help me, I'd be very grateful.

Cast the input values and text content to integers.
You can achieve this various ways:
+str
parseInt(str)
Number(str)
var LC = +$('#a').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").val(),
ES = +$('#b').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").val(),
VK = +$('#c').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").val(),
SPY = +$('#d').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").val(),
CL = +$('#e').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").val();
console.log([LC, ES, VK, SPY, CL].every(v => v === true)); // All eval to true
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
input[type="text"] { width: 4em; text-align: center; }
.container { display: flex; gap: 0.25em; margin-left: 0.5em; }
.container div { text-align: center; width: 3.25em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="a">1</div>
<div id="b">101</div>
<div id="c">1001</div>
<div id="d">10001</div>
<div id="e">100001</div>
</div>
<div id="content_value">
<div></div>
<div></div>
<div>
<div>
<form>
<table>
<tbody>
<tr></tr>
<tr>
<td></td>
<td></td>
<td><input type="text" value="1"/></td>
<td><input type="text" value="101"/></td>
<td><input type="text" value="1001"/></td>
<td><input type="text" value="10001"/></td>
<td><input type="text" value="100001"/></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>

While it's true that 164 > 3 resolved to true, '164' > '3' resolves to false.
You need to convert these strings to numbers first. Consider using parseInt for that, if they're guaranteed to be integers. You could also use parseFloat or the Number constructor to convert a string to a number:
parseInt('164', 10); // 164
parseFloat('164'); // 164
Number('164'); // 164

dynamic content on document.querySelector

I want to create loop on JS:
for(let i=0;i<3;i++){
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(i) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
}
div:nth-child(i) - when i is changing
so the result will be:
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(0) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(1) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")
document.querySelector("#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(2) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)")

The ` instead of " let you do string interlopation: (And then use ${i})
for(let i=0;i<3;i++){
document.querySelector(`#a-page > div.a-section.askQuestionListPage > div:nth-child(7) > div > div > div:nth-child(${i}) > div > div.a-fixed-left-grid-col.a-col-right > div.a-fixed-left-grid.a-spacing-base > div > div.a-fixed-left-grid-col.a-col-right > span:nth-child(3)`)
}

Can not select element using Selector result from Chrome

I am trying to select an element with 'Selector name' and then delete it.
But I am unable to select the element :
Chrome give me Selector :
body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)
To select it I tried to use :
document.querySelector("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")
Which return null
and
document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")
Which return NodeList[] I bet this is a good return
So I tried this way to delete this element :
var ChromeSelector = document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)");
ChromeSelector.parentNode.removeChild(ChromeSelector)
but it does not work... Am I missing something ?
var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");
alert(ChromeSelector)
ChromeSelector.parentNode.removeChild(ChromeSelector)
<section MySectionTest>
<div _Firstdiv class="container">
<div _Seconddiv class="Column">
<div FirstSectionElement class="section">
<h1 _ngcontent-kwd-c95="">Test</h1>
</div>
<div FirstSectionElement class="section">
<h1 _ngcontent-kwd-c95="">Test2</h1>
</div>
</div>
</div>
</section>

The answer was thank you #Quentin :
var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");
ChromeSelector[0].remove();

JavaScript only working if the web is refreshed, not the first time?

Javasciprt not working the first time, if the web is reload is working fine, cant find the error i am not using timeout or something similar, only document ready
i cant find the error i tried others events like document on load or autorefreshing the web 1 time, but the last one its not working ebcause its not doing the javascript the first time like i say ;(
the jquery script:
<script>
if (window.location.href.indexOf(".com/courses") >= 0) {
$(document).ready(function () {
jQuery.noConflict();
$(".atr458").hover(function () {
$(".atr458").css("color", "#09A59A");
});
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(7) > div > div.course-listing-extra-info.col-xs-12"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(1) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(3) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a href='' class='ahre55' >Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(5) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(6) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(8) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(9) > div > div.course-listing-extra-info.col-xs-12 > div:nth-child(3) > div"
).html(
"<a class='ahre55' href=''>Mas Informacion</a>"
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(2) > div > div.course-listing-extra-info.col-xs-12"
).append(
"<a class='atr458' id='atr457' href=''>Aplicar Aquí</a>" //COMPELTAR CON LINK
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(10) > div > div.course-listing-extra-info.col-xs-12"
).append(
"<a class='atr458' id='atr457' href=''>Aplicar Aquí</a>" //COMPELTAR CON LINK
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(11) > div > div.course-listing-extra-info.col-xs-12"
).append(
"<a class='atr458' id='atr457' href=''>Aplicar Aquí</a>" //COMPELTAR CON LINK
);
$(
"body > div.view-school > div > div > div.row.course-list.list > div:nth-child(12) > div > div.course-listing-extra-info.col-xs-12"
).append(
"<a class='atr458' id='atr457' href=''>Aplicar Aquí</a>" //COMPELTAR CON LINK
);
$(".atr458").css("left", "30%");
})
}
jQuery.noConflict();
</script>

Check which cell on a name column is equal to certain text

I'm new in using Nightwatch and I need help with the following:
I need to check which cell on a name column on a table is equal to a text for example name3
Here's my script for the following but it's not working
var name3 = client.globals.item3.name
for (i = 1; i <=10; i++){
client.getText("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child("+ i +") > div > div:nth-child(4) > div > div > a > span", function(result) {
client.expect.element("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child("+ i +") > div > div:nth-child(4) > div > div > a > span").text.to.equal(name3);
client.verify.elementPresent('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child('+ i +') > div > div:nth-child(4) > div > div > a')
client.verify.containsText('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child('+ i +') > div > div:nth-child(4) > div > div > a', name3)
i = 11;
});
}

This is all because of asynchronous behavior of nodejs.
Try this
function test(i) {
var name3 = client.globals.item3.name
client.getText("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(" + i + ") > div > div:nth-child(4) > div > div > a > span", function (result) {
client.expect.element("#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(" + i + ") > div > div:nth-child(4) > div > div > a > span").text.to.equal(name3);
client.verify.elementPresent('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(' + i + ') > div > div:nth-child(4) > div > div > a')
client.verify.containsText('#table > div.ReactTable.noBorder-undefined.noHeader-undefined.compact-undefined.expanded-undefined.no-data-false.subComponentLarge-undefined.undefined.editable-table > div.rt-table > div.rt-tbody > div:nth-child(' + i + ') > div > div:nth-child(4) > div > div > a', name3)
});
while (j <= 10) {
test(j);
j++;
}
}
Let me know if it works

Categories