When I try to change the value of a css variable with js error

Asked

Viewed 31 times

-4

When I try to change the value of a css variable with js the following error:

index.html:27 Uncaught ReferenceError: root is not defined
    at HTMLBodyElement.<anonymous> (index.html:27)

i declared the variables in css so:

:root{
        --topV: 0%;
        --leftV: 0%;
      }

to try to change the top and the left of an html element. Code in html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<!--nam é o nome da função-->
<body onload="nam()">
<div id="divisor">O</div>
</body>
</html>

whole code of js:

 var ws = 0
        var ad = 0
        var a = document.getElementById("aaaaa")
      function nam() {
        document.body.addEventListener("keydown" ,(e)=>{
          if(e.key === "w"){
            ws + 1
            root.style.setProperty('--topV', ws)
            console.log(ws)
          }
          if(e.keyCode === "s"){
            ws- 10
            a.style.top = `${ws}px`
          }
          if(e.keyCode === "a"){
            ad+ 10
            a.style.top = `${ad}px`
          }
          if(e.keyCode === "d"){
            ad- 10
            
          }
        });
      }

no js i tried to change the value of the variable so:

//ws é uma variavel que eu defini anteriormente no programa
  document.body.addEventListener("keydown" ,(e)=>{
          if(e.key === "w"){
            ws + 1
            root.style.setProperty('--topV', ws)
            console.log(ws)
          }

what I could do to solve this problem in my code(I’m new in the area and I don’t know much about website programming)?

javascript html5 css3

1 answer

0

Hello, Matheus.

The error in the code occurs because the root variable you are trying to access here:

root.style.setProperty('--topV', ws)

has not been declared anywhere. The pseudo class :root used in your CSS points to the root element of the page and to be able to access it via js, you should use the path

document.documentElement

Usually this root element is the html.

In your case, after the changes, the code quoted above would be as follows::

document.documentElement.style.setProperty('--topV', ws)

However, I suggest that in addition, you review the shape and why of how the variables Ws and ad are being used. If your intention is to increment and decrease the values according to the key pressed, I suggest the following changes:

if(e.key === "w"){
  ws++; 
  
  document.documentElement.style.setProperty('--topV', ws)
  console.log(ws)
}
if(e.keyCode === "s"){
  ws -= 10;
  a.style.top = `${ws}px`
}
if(e.keyCode === "a"){
  ad += 10;
  a.style.top = `${ad}px`
}
if(e.keyCode === "d"){
  ad -= 10;            
}

After these fixes, the code performs normally.

References:
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.