how to check if an html element has certain text with javascript-CodePudding

I have an html p tag as showen below

   <p >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 >0 <spam>left</spam></p> 
   
    <button  disabled="false">Out of Stock</button>

CodePudding user response：

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;
    }
  }
}

CodePudding user response：

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 >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 >0 <span>left</span></p>
<button id="btn">Button</button>

<hr/>

<p >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.

CodePudding user response：

<script language="javascript">
$(document).ready(() => {
    let html = $(".card-about-bambo-number.card-aboot-mahagany-number").html();
    let result = html.indexOf("0");
    if(result!=-1){
            alert("Found at " result);
            //do as per requirement
    }
});
</script>

Try this it should solve your problem.

CodePudding user response：

textcontent should be innerHTML