Nothing returning when I am trying to get the value of a property of an HTML element

Question

I am trying to go back to when I learned javascript to make a game of pong. I am trying to get the "left" value to see how far the playArea is from the left to set the position of the ball in the middle. The script is located at the bottom of the body tag.

Where I am trying to call the resetGame function just to test to see if I can change the balls position to be in the center of the play area. I am trying to log the value of the playArea's left value and it is returning it as if it is nothing. (See below)

It should say "Value of playArea's left: 150px" or maybe just the 150 but it is just empty

The live server is just so i can run it on my browser. Any help would be great as to why this is not returning anything. Thanks!

var ball = document.getElementById('ball');

function resetGame() {
  var box = document.getElementById('playArea');
  console.log("Value of playArea's left: " + getStyle('playArea',
    'left'));
  ball.style.left = ((box.style.left + (box.style.left +
    box.style.width)) / 2) + "px";

  // ball.style.left = 0 + "px";
}

function getStyle(id, property) {
  // console.log(id);
  // console.log(tmp.style.left);
  return document.getElementById(id).style[property];
}

#playArea{
  background-color: #000000;
  border: 2px solid white;
  width: 1000px;
  height: 75%;
  position: fixed;
  left: 150px;
  top: 20px;
}
body{
  background-color: black;
}
#ball{
  background-color: white;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  position: relative;
  left: 50%;
  top: 50%;
}
#start{
  height: 50px;
  width: 100px;
  background-color: white;
  position: fixed;
  top: 80%;
  left: 500px;
}
#reset{
  height: 50px;
  width: 100px;
  background-color: white;
  position: fixed;
  top: 80%;
  left: 700px;
}
.insidebuttons{
  font-size: 20px;
  padding: 13px;
  text-align: center;
  font-family: sans-serif;
}
.insidebuttons:hover{
  cursor: pointer;
}
.paddle{
  width: 30px;
  height: 100px;
  position: fixed;
  background-color: white;
  top: 33%
}
#paddleLeft{
  left: 170px;

}
#paddleRight{
  left: 1105px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Pong</title>
</head>

<body>

  <div class="outer" id="playArea">
    <div class="inner" id="ball"></div>
    <div class="paddle" id="paddleLeft"></div>
    <div class="paddle" id="paddleRight"></div>
  </div>

  <div type="button" name="start" id="start" onclick="startGame()">
    <div class="insidebuttons">Start</div>
  </div>
  <div type="button" name="reset" id="reset" onclick="resetGame()">
    <div class="insidebuttons">Reset</div>
  </div>
  <div class="overlay" id="overlay"></div>

  <script type="text/javascript" src="functions.js"></script>
</body>

</html>

duplicate of: https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — Temani Afif, Feb 22 '21 at 08:27

score 1 · Accepted Answer · answered Feb 22 '21 at 01:52

You cannot get the value directly from the style of the element. For values coming from external css stylesheets, you need to use getComputedStyle() function to get the actual value coming from the stylesheet. The returned value of getStyle() will be in px value.

var ball = document.getElementById('ball');

function resetGame() {
  var box = document.getElementById('playArea');
  console.log("Value of playArea's left: " + getStyle('playArea',
    'left'));
  ball.style.left = ((box.style.left + (box.style.left +
    box.style.width)) / 2) + "px";

  // ball.style.left = 0 + "px";
}

function getStyle(id, property) {
  // console.log(id);
  // console.log(tmp.style.left);
  //return document.getElementById(id).style[property];
  let el = document.getElementById(id);
  return getComputedStyle(el).getPropertyValue(property); // getComputedStyle will get the actual value from the stylesheet
}

#playArea {
  background-color: #000000;
  border: 2px solid white;
  width: 1000px;
  height: 75%;
  position: fixed;
  left: 150px;
  top: 20px;
}

body {
  background-color: black;
}

#ball {
  background-color: white;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  position: relative;
  left: 50%;
  top: 50%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Pong</title>
</head>

<body>

  <div class="outer" id="playArea">
    <div class="inner" id="ball"></div>
    <div class="paddle" id="paddleLeft"></div>
    <div class="paddle" id="paddleRight"></div>
  </div>

  <div type="button" name="start" id="start" onclick="startGame()">
    <div class="insidebuttons">Start</div>
  </div>
  <div type="button" name="reset" id="reset" onclick="resetGame()">
    <div class="insidebuttons">Reset</div>
  </div>
  <div class="overlay" id="overlay"></div>

  <script type="text/javascript" src="functions.js"></script>
</body>

</html>

The worked! I am not very good at js so if you wouldn't mind me asking why you said "let el =" instead of " var el =" — Nick, Feb 22 '21 at 01:57
I could use both `let` and `var` in this case. There's no specific reason why I chose it. You can find detailed information about them in here https://stackoverflow.com/a/11444416/6480803 — Rifat Bin Reza, Feb 22 '21 at 02:07

Nothing returning when I am trying to get the value of a property of an HTML element

1 Answers1