I have an html p tag as showen below
<p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p> I also have a button that I would like to be disabled when the p tag has a 0 in.
I have tried doing this both within JavaScript and jquery.
I tried using includes but this didnt work, I have also tried using contains.
Here is the code I have tired
$(document).ready(() => {
if ($(".card-about-mahagany-number:contains('0')")) {
$('.btn-about-mahagany').attr('disabled', 'disabled');
$('.card-about-mahagany-body').addClass('card-zero');
}
});
const numberText = document.getElementsByClassName('card-aboot-mahagany-number');
const buttonOut = document.getElementsByClassName('btn-about-mahagany');
//buttonOut.disabled = true;
if (numberText.textContent.includes('0')) {
buttonOut.disabled = true;
}<p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p>
<button class="btn btn-select btn-about-mahagany btn-primary" disabled="false">Out of Stock</button>
document.getElementsByClassName returns an array-like object of the elements with that class.
Try this:
for (let i = 0; i < numberText.length; i++) {
if (numberText[i].textContent.includes("0")) {
for (let i = 0; i < buttonOut.length; i++) {
buttonOut[i].disabled = true;
}
}
}
First, lets change from <spam> to <span>.
Second, we try to create a simple code for one card only. In this case, if you change the value from 0 to 1, you will see the button. If you change the value from 1 to 0, the button will not show up when you run it.
$(document).ready(() => {
console.log('document ready');
let card = $('p.card-about-bambo-number');
console.log(card.text());
let value = +card.text().replace(/\D+/g, "");
console.log('value: ', value);
console.log('value type: ', typeof(value));
$('#btn').toggle(value > 0);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p>
<button id="btn">Button</button>Third, lets modify this to work with more than one card:
$(document).ready(() => {
let cards = $('p.card-about-bambo-number');
cards.each(function() {
let card = $(this);
let value = +card.text().replace(/\D+/g, "");
card.next('#btn').toggle(value > 0);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p>
<button id="btn">Button</button>
<hr/>
<p class="card-about-bambo-number card-aboot-mahagany-number">1 <span>left</span></p>
<button id="btn">Button</button>Using the class card-about-bambo-number, we will iterate throughout all the elements that have that class.
For each card, we will use the method text to extract the text, then we use regular expression to remove anything that isn't a digit, next we convert the number from a string to a number using + in front (a "javascript hack"), and with that we obtain the number.
Finally, we indicate that with want the next sibling to that element containing such class, to toggle (show/hide) depending if the value is higher than zero.
I hope this helps out.
textcontent should be innerHTML