Quando eu tento alterar o valor de uma variável de css com js da o seguinte erro:
index.html:27 Uncaught ReferenceError: root is not defined
at HTMLBodyElement.<anonymous> (index.html:27)
eu declarei as variaveis no css assim:
:root{
--topV: 0%;
--leftV: 0%;
}
para tentar mudar o top
e o left
de um elemento de html. Código no 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>
codigo inteiro do 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 eu tentei mudar o valor da variavel assim:
//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)
}
oque eu poderia fazer para resolver esse problema no meu código(sou novo na área e não sei muita coisa sobre programação de sites)?