Reading HTML element parent / Reading child element with specific content-CodePudding

I've been working on this challenge for frontendmentor and I'm a bit stuck on the js aspect of it. What I'm trying to do is basically have the script read whether the content of a P tag is 0, and to give the div containing it a class so I can style it differently.

<section class="pledge-box sub-sections sub-section2">    
    <h4>Black Edition Stand</h4>
    <p class="pledges">Pledge $75 or more</p>
    <p class="paragraph">
        You get a Black Special Edition computer stand and a personal 
        thank you. You’ll be added to our Backer member list. Shipping is included.
    </p>
    <div class="leftovers">
        <p class="number">64</p>
        <p>left</p>
    </div>
    <button onclick="blackCheck()">Select Reward</button>
</section>
<section class="pledge-box sub-sections sub-section3">
    <h4>Mahogany Special Edition</h4>
    <p class="pledges">Pledge $200 or more</p>
    <p class="paragraph">
       You get two Special Edition Mahogany stands, a Backer T-Shirt, and
        a personal thank you. You’ll be added to our Backer member list.
        Shipping is included.
    </p>
    <div class="leftovers">
        <p class="number">0</p>
        <p>left</p>
    </div>
    <button onclick="mahoganyCheck()">Out of Stock</button>
</section>

This is a small part of the html.

Basically I wanna do this by having the script loop through the p in leftovers and if content equals 0, change the styling of the whole box.

This is what I have so far.

const leftover = document.querySelectorAll('.number')
const pledgeBox = document.querySelectorAll('.pledge-box')

leftover.forEach((remaining) => {
  if (remaining.innerHTML == '0') {
    //(insert a way to get the parent box(pledgeBox) and add a class to classlist here)
  }
});

CodePudding user response：

Try this solution

const leftover = document.querySelectorAll('.number')
const pledgeBox = document.querySelectorAll('.pledge-box')

leftover.forEach((remaining) => {
  if (remaining.innerHTML == '0') {
    //(insert a way to get the parent box(pledgeBox) and add a class to classlist here)
     remaining.parentNode.style.cssText =`
     backgroundColor:"orange"
     `
     //you can add your own styles here
  }
});

CodePudding user response：

You might've been putting parenthesis on parentNode which may be why it said it's not a function (because it isn't)

remaining.parentNode.classList.add('myClass');

CodePudding user response：

To ensure you get the closest pledgeBox (since its not a direct parent to the .number p tag, you can use closest

const leftover = document.querySelectorAll('.number')

leftover.forEach(remaining => {
  if (remaining.innerHTML == '0') {
    let pledgeBox = remaining.closest(".pledge-box"))
    // or use .leftovers, its unclear which box you want.

    // add class to pledgeBox
  }
});

CodePudding user response：

OK. Try this to change the leftover's style when it's innerHTMl is '0'

const leftover = document.querySelectorAll('.number')
const pledgeBox = document.querySelectorAll('.pledge-box')

leftover.forEach((remaining) => {
  if (remaining.innerHTML == '0') {
  
//(insert a way to get the parent box(pledgeBox) and add a class to     classlist here)
     remaining.classList.add('style')
     
//Create your own css file and call the class '.style' and add styles   what you want
  }
});