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
Related
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
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)`)
}
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();
I'm want to change that
<td rowspan="2"><img src="/ORegMx/capito.png" alt="capito"></td>
to that
<td rowspan="2"><div id="divPage"><img src="/ORegMx/capito.png" alt="capito"></div></td>
i tried
var elem = document.createElement("div");
elem.setAttribute("id", "divPage");
document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > img").appendChild(elem);
but it gives
Also tried
var str = '<div id="divPage"><img src="/ORegMx/capito.png"/></div>';
document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2)").replaceWith(str);
but it gives
Appreciate any help !
Your code tries to put the div inside the img, but you've said you want the div to wrap the image. To do that, you need to:
Add the div to the img's parent, just before (or after) the img, and then
Move the img into the div
For instance:
var div = document.createElement("div");
div.id = "divPage";
var img = document.querySelector("body > table.troisbords > tbody > tr > td > table > tbody > tr > td > div > blockquote > table > tbody > tr:nth-child(2) > td > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > img");
var parent = img.parentNode;
var next = img.nextSibling;
div.appendChild(img);
parent.insertBefore(div, next);
When you append the img to the div, it's moved (not copied).
(Also note that you can use the reflected property for id, you don't need setAttribute.)
Live Example:
var div = document.createElement("div");
div.id = "divPage";
var img = document.querySelector("#the-img");
var parent = img.parentNode;
var next = img.nextSibling;
div.appendChild(img);
parent.insertBefore(div, next);
#divPage {
border: 1px solid black;
}
<img id="the-img" src="https://via.placeholder.com/100x100.png?text=The%20Image">
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