Does not see the font size

Question

I want to address to font-size to change the size of a ball when pressing keys, but in switch the program sees only size (instead of font-size) after a hyphen.

Task: Create a page that displays a balloon (using emoji https://emojipedia.org/balloon/). When you click the up arrow, the ball should inflate (increase) by 10 percent, and when you click the down arrow, it should inflate (decrease) by 10 percent.

Then finish the program as follows, if the ball is inflated to a certain size, it will explode. That is, you need to replace the emoji of the ball (balloon) with the emoji of the explosion (https://emojipedia.org/collision-symbol/). You need to remove the event handler (the explosion cannot be inflated or inflated)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    html, body{
        margin:0;
        overflow:hidden;
    }
    #blueRect{
        margin-left: auto;
        margin-right: auto;
        width:1000px;
        height:1000px;
        background-color: none;
        font-size: 500px;
        text-align: center;
        cursor: default
    }
    .box1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  bottom: auto;
  height: 1500px;
  width: 1000px;
}
.one { 
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}
.two {
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  visibility:hidden;
}
#second{
 margin-left: auto;
        margin-right: auto;
        width:1000px;
        height:1000px;
        background-color: none;
        font-size: 500px;
        text-align: center;
        cursor: default
}
    </style>
</head>
<body>
<div class = "box1">
<div class = "one" id="blueRect"></div>
<div class = "two" id="second"></div>
</div>
<script>
function moveRect(e){
     
    var blueRect = document.getElementById("blueRect");
    var cs = window.getComputedStyle(blueRect);
     
    
    var size = parseInt(cs.style.fontSize);
    switch(e.key)
    {        
        case "ArrowUp":       
                blueRect.style.fontSize = size + 10 + "px"; /*setSize(size+10px)*/
           break;
 
        case "ArrowDown":             
                blueRect.style.fontSize = size - 10 + "px";
           break;
    }
}
addEventListener("keydown", moveRect);
if (size > 50px){
one.style.visibility = hidden;
two.style.visibility = visible;
}
</script>
</body>
</html>

Have a look at the docs for [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#javascript) which gives an example of how to get the `font-size`. — Kirk Beard, May 06 '21 at 10:02
I've seen it used style.fontSize, but still problems. What about if - I delete. I need to deal first fontSize. — M K, May 06 '21 at 10:07
`var size = window.getComputedStyle(blueRect).getPropertyValue("font-size")` This will fetch size — Nithin - Techidiots, May 06 '21 at 10:14

score 0 · Answer 1 · answered May 06 '21 at 10:43

You can use below codes with adding up your own functionality , below code is just to reference , make it use and develop accordingly based on your needs.Hope this may help. Codepen Demo.

  var blueRect = document.getElementById("blueRect");
    var size_val = window.getComputedStyle(blueRect,null).getPropertyValue("font-size");
     
    var size = parseInt(size_val);

function moveRect(event){
  //alert(event.type);
  
    switch(event.type)
    {        
      case "click": 
            var newSize = (size + 10); 
        size = newSize;
            blueRect.style.fontSize = newSize +"px"; /*setSize(size+10px)*/
      break;
    }
}


blueRect.addEventListener("click", moveRect); // Put your arrowup and arrowdown similar to this here blueRect act as up similarly do it for down

html, body{
    margin:0;
    overflow:hidden;
}
#blueRect{
    margin-left: auto;
    margin-right: auto;
    width:1000px;
    height:1000px;
    background-color: none;
    font-size: 500px;
    text-align: center;
    cursor: default
}
.box1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  bottom: auto;
  height: 1500px;
  width: 1000px;
}
.one { 
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}
.two {
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  visibility:hidden;
}
#second{
  margin-left: auto;
  margin-right: auto;
  width:1000px;
  height:1000px;
  background-color: none;
  font-size: 500px;
  text-align: center;
  cursor: default
}

<body>
<div class = "box1">
  <div class = "one" id="blueRect"></div>
</div>
</body>

Thank, but i fixed it another way - var size = parseInt(cs.fontSize); . Now i think about explosion part. — M K, May 06 '21 at 10:54

Does not see the font size

1 Answers1