Html Question posted in
Some basic documentation can be found here.

Html – Any idea about why my background color is not workin

I did a simple js exercise in my html, the thing is, it just will pop up a new div when my radial input were pressed,
so anytime my radial input(any of those 3) got pressed a pop up div will slide down(till now, i just did it with my first radial input, but as it not working, i wont apply anything to the left 3)

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


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



function NewWindow(){

//--*------------HERE LIE THE PROBLEM---------------*-----    
         NewW.style.backgroundColor = "red";
         NewW.style.width = "100%";
         NewW.style.display = "inline-block";

//--*-----------------------------------------------*---
    (function moveDown() {
        var top = parseInt(NewW.style.marginTop); // get the top margin
                                                 // we'll be using this to
                                                 // push the div down

        if (!top) {
            top = 0; // if the margin is undefined, default it to zero
        }

        top += 20; // add 20 pixels to the current margin
        
        NewW.style.marginTop = top + 'px'; // push div down
        
        if (top < 100) {
            // If it's not yet 200 pixels then call this function
            // again in another 100 milliseconds (100 ms gives us
            // roughly 10 fps which should be good enough):
            setTimeout(moveDown,100);
        }


        //from : https://stackoverflow.com/questions/3606932/javascript-slide-element
        //** slebetman answer


        //I just add up this one to close my div when clicked again
        if(top > 100)
        {
            NewW.style.marginTop = 0 + 'px';//Go back in plache whe clicke again
            NewW.style.display = "none";
        }
    })();
    
    

}



function Equilate(l1,l2,l3){ //ignore here, im trying to solve the up problem first.
    return  l1*l2*l3;
}


EquiConst.addEventListener("click",NewWindow);
<div class="outer_content">
    <form>  
        <p>Choose the triangle type:</p>  
        <input id="Eqi" type="radio" name="Type" value="equilateral"> Equilateral<br>  
        <div class="Appear" id="WindowOut" ></div>
        <input id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
        <input id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>   
      </form>
</div>
Tags:

2

Answers


  1. 0

    You have to add CSS attribute height for your styles. For example

    NewW.style.backgroundColor = "red";
NewW.style.width = "100%";
NewW.style.display = "inline-block";
NewW.style.height = "200px";
    Login or Signup to reply.
  2. 0

    The issue is that the element isn’t growing at all. Initially it’s having a height of 0, in which case, no matter how much width or margin you set, it’s going to remain invisible. When you increase the margin to expand it, it will add the space between the two inputs but the element itself isn’t growing as the margin exists outside the element.

    if you set the height or padding (which takes space inside the element) that will work as you expect. I use paddingTop in the example.

    note that in both of the examples below, I have commented out the link tag to the css file and the script tag for the js file to make it work here. The html is otherwise untouched.

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

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

function NewWindow() {

  //--*------------HERE LIE THE PROBLEM---------------*-----    
  NewW.style.backgroundColor = "red";
  NewW.style.width = "100%";
  NewW.style.display = "inline-block";

  //--*-----------------------------------------------*---
  (function moveDown() {
    var top = parseInt(NewW.style.paddingTop); // get the top margin
    // we'll be using this to
    // push the div down

    if (!top) {
      top = 0; // if the margin is undefined, default it to zero
    }

    top += 20; // add 20 pixels to the current margin

    NewW.style.paddingTop = top + 'px'; // push div down

    if (top < 100) {
      // If it's not yet 200 pixels then call this function
      // again in another 100 milliseconds (100 ms gives us
      // roughly 10 fps which should be good enough):
      setTimeout(moveDown, 100);
    }


    //from : https://stackoverflow.com/questions/3606932/javascript-slide-element
    //** slebetman answer


    //I just add up this one to close my div when clicked again
    if (top > 100) {
      NewW.style.paddingTop = 0 + 'px'; //Go back in plache whe clicke again
      NewW.style.display = "none";
    }
  })();
}

function Equilate(l1, l2, l3) { //ignore here, im trying to solve the up problem first.
  return l1 * l2 * l3;
}

EquiConst.addEventListener("click", NewWindow);
    <!DOCTYPE html>
<html>
    <head>
        <meta name="Training">
        <meta name="author" content="Vitor Mota">
        <title>Training</title><!--Practice-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <!--Estou colocando em ingles, mas vou traduzindo nos comentarios
         <link rel="stylesheet" type="text/css" href="cssFile.css">
    <script src="JsExc3.js" defer></script> -->
        <meta charset="UTF-8">
    </head>
    <body >
        <div class="outer_content">
            <form>  
                <p>Choose the triangle type:</p>  
                <input id="Eqi" type="radio" name="Type" value="equilateral"> Equilateral<br>  
                <div class="Appear" id="WindowOut" ></div>
                <input id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
                <input id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>   
              </form>
        </div>
       
        
    </body>
</html>

    Alternative Answer

    I would like to suggest a better approach to do the same thing. that is, using CSS.

    For the element with the .Appear class, I’m setting the background color to red and adding the CSS transition property for the padding set to animate in 0.5 seconds. After setting that, if you change padding by adding the css clas .show to it, it will transition the padding from 0 to 100px within 0.5 seconds.

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

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

function handleChange(e) {
  if(e.target.value === 'equilateral') {
    NewW.classList.add("drop");
  } else {
    NewW.classList.remove("drop");
  }
}

// trigger handler with all radio buttons
radioButtons.forEach(function(radioButton) {
    radioButton.addEventListener('change', handleChange);
});
    .Appear {
  width: 100%;
  background-color: red;
  transition: padding 0.5s;
}
.Appear.drop {
  padding-top: 100px;
}
    <!DOCTYPE html>
<html>
    <head>
        <meta name="Training">
        <meta name="author" content="Vitor Mota">
        <title>Training</title><!--Practice-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                       <!--Estou colocando em ingles, mas vou traduzindo nos comentarios
         <link rel="stylesheet" type="text/css" href="cssFile.css">
    <script src="JsExc3.js" defer></script> -->
        <meta charset="UTF-8">
    </head>
    <body >
        <div class="outer_content">
            <form>  
                <p>Choose the triangle type:</p>  
                <input id="Eqi" type="radio" name="Type" value="equilateral"> Equilateral<br>  
                <div class="Appear"></div>
                <input id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
                <input id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>   
              </form>
        </div>
       
        
    </body>
</html>

    There are ways to do this without using any js (only css and plain html) as well, but I’ll need to change the html structure a little bit, so I’ll leave it at this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search