I want to hide the check-out button when the text "No shipping options found for" is visible. I'm selecting by query all to get some elements, after this I select the button and I apply the style display none, but it is still showing. I don't know what i'm doing wrong.
function hidenv() {
var txt = document.querySelectorAll(".shipping td")[0].innerText;
if (txt >= "No shipping options found for") {
document.querySelectorAll(".proceed-to-checkout").forEach((element) => element.style.display = "none");
}
}<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
No shipping options found for <strong>xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>It is because no event is defined to execute function . Here hidenv() at bottom works as automatic execution on load .
Also add the word you want to match in separate container so that it can be easily retrieved and matched properly .
function hidenv() {
var txt = document.querySelectorAll(".notFound")[0].innerText;
if (txt == "No shipping options found for") {
document.querySelector(".proceed-to-checkout").style.display = "none";
}
}
hidenv();<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
<span class="notFound">No shipping options found for</span><strong> xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>I think depending on text inside an element is not a god idea! but if you really want to do it, this is the way!
It's better to have div inside and make it show and hide. Hiding a is not the best idea.
let theShipmentElement = $("td[data-title='Shipment']");
if(theShipmentElement.html().indexOf('No shipping options found for') > -1){
theShipmentElement.hide();
}
@Rana have been share a good answer but the text showing don't have any html tag. So i did this.
First select the text inside another and and later aply the display none
function hidenv() {
var txt = document.querySelector(".shipping").querySelectorAll("td")[0].innerText;
if (txt === "No shipping options found for") {
document.querySelector(".proceed-to-checkout").style.display = "none";
}
}
hidenv();<tr class="shipping">
<th>Shipment</th>
<td data-title="Shipment">
No shipping options found for <strong>xxxx, xxx, 0000</strong>.
</td>
</tr>
<div class="proceed-to-checkout">
<a href="https://nextstep.nxt/" class="checkout-button">
Proceed payment</a>
</div>