Simple question about HTML content and css

Sung99
February 19, 2024
199 views
0 votes
2 Answers

It happens a lot with me, i set on my HTML code on a specific content display: none, not to show the inner content (child node), unless someone click on it, so, in my css i create another class, to display:block just to when someone clik on my content, I toggle or add this class and then, child node be showed, but it is not working, so i put !important on my css class and it work perfeclty fine, i would like to understand why.

Here is my HTML code, where class ‘appear’ is such a class that i would like not to show, unless someone click on the radio.

Here is my css code, where on .appear .drop, when someone clik on my radio, i would like to show my class ‘appear’ and change the display:none to block, but it work ONLY when i typed !important(which already has been added)

Here my js code.

I’m just looking for a explantion about it, I am newbie.

let EquiConst = document.querySelector("#Eqi");
let RectConst = document.querySelector("#Rec");
let IsoConst = document.querySelector("#Iso");


let NewW = document.querySelectorAll(".Appear");



var radioButtons = document.querySelectorAll('input[type="radio"]');


//use code from Azoof Ahmed on https://stackoverflow.com/questions/77956842/any-idea-about-why-my-background-color-is-not-workin/77957267#77957267
//but added just a simple feature on work in all my 3 elements
function handleChange(e) {
  if(e.target.value === 'equilateral') {
    NewW[0].classList.add("drop");
   
  } else {
    NewW[0].classList.remove("drop");
  }

  if(e.target.value === 'rectangle') {
    NewW[1].classList.add("drop");
  } else {
    NewW[1].classList.remove("drop");
  }               
  
  if(e.target.value === 'isosceles') {
    NewW[2].classList.add("drop");
  } else {
    NewW[2].classList.remove("drop");
  }
}

// trigger handler with all radio buttons
radioButtons.forEach(function(radioButton) {
    
        radioButton.addEventListener('change', handleChange);
    
    
});


//append child to my div appear for put some data in there

let sideEqui = document.createElement("input")
let child1 = NewW[0].appendChild(sideEqui);

.Appear {
    width: 100%;
    
    transition: padding 0.5s;
  }
  .Appear.drop {
    display: block !important;
    height: 20px;
    padding-top: 2px;
  }

<div class="outer_content">
  <form>  
    <p>Choose the triangle type:</p>  
    <input class="App" id="Eqi" type="radio" name="Type" value="equilateral">Equilateral<br>  
    <div class="Appear" style="display: none;"></div>
    <input class="App" id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
    <div class="Appear"></div>
    <input class="App" id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>
    <div class="Appear" ></div>  
  </form>
</div>

Answers

Instead of setting display none and a class of Appear on your div elements in the html, just include a class for Hidden on your elements. Then in your Javascript you can remove or add back that class of Hidden. It simplifies your code and removes any need for !important.

Here is a stripped down version of your code with these changes.

let NewW = document.querySelectorAll(".Hidden")
let radioButtons = document.querySelectorAll('input[type="radio"]')

radioButtons.forEach( function(button) {
  button.addEventListener('change', handleChange);
} )

function handleChange( event ) {
  // event.target.nextElementSibling.classList.remove( "Hidden" )
  if( event.target.value == "equilateral" ) {
    NewW[0].classList.remove( "Hidden" )
  }
  else NewW[0].classList.add( "Hidden" )

  if( event.target.value == "rectangle" ) {
    NewW[1].classList.remove( "Hidden" )
  }
  else NewW[1].classList.add( "Hidden" )

  if( event.target.value == "isosceles" ) {
    NewW[2].classList.remove( "Hidden" )
  }
  else NewW[2].classList.add( "Hidden" )
}

.Hidden {
  display: none;
}

      <input type="radio" name="Type" value="equilateral">
      <div class="Hidden">equilateral</div>
      <input type="radio" name="Type" value="rectangle">
      <div class="Hidden">rectangle</div>
      <input type="radio" name="Type" value="isosceles">
      <div class="Hidden">isosceles</div>

display: block isn’t being applied without !important because display: none in the style attribute in your html code has higher specificity than a class selector.
If you move display: none to your CSS file, your code should work without needing to use !important.

let EquiConst = document.querySelector("#Eqi");
let RectConst = document.querySelector("#Rec");
let IsoConst = document.querySelector("#Iso");


let NewW = document.querySelectorAll(".Appear");



var radioButtons = document.querySelectorAll('input[type="radio"]');


//use code from Azoof Ahmed on https://stackoverflow.com/questions/77956842/any-idea-about-why-my-background-color-is-not-workin/77957267#77957267
//but added just a simple feature on work in all my 3 elements
function handleChange(e) {
  if(e.target.value === 'equilateral') {
    NewW[0].classList.add("drop");
   
  } else {
    NewW[0].classList.remove("drop");
  }

  if(e.target.value === 'rectangle') {
    NewW[1].classList.add("drop");
  } else {
    NewW[1].classList.remove("drop");
  }               
  
  if(e.target.value === 'isosceles') {
    NewW[2].classList.add("drop");
  } else {
    NewW[2].classList.remove("drop");
  }
}

// trigger handler with all radio buttons
radioButtons.forEach(function(radioButton) {
    
        radioButton.addEventListener('change', handleChange);
    
    
});


//append child to my div appear for put some data in there

let sideEqui = document.createElement("input")
let child1 = NewW[0].appendChild(sideEqui);

.Appear {
    width: 100%;
    display: none;
    transition: padding 0.5s;
}
.Appear.drop {
    display: block;
    height: 20px;
    padding-top: 2px;
}

<div class="outer_content">
  <form>  
    <p>Choose the triangle type:</p>  
    <input class="App" id="Eqi" type="radio" name="Type" value="equilateral">Equilateral<br>  
    <div class="Appear"></div>
    <input class="App" id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
    <div class="Appear"></div>
    <input class="App" id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>
    <div class="Appear" ></div>  
  </form>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.