-4

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)?

1 Resposta 1

0

Olá, Matheus.

O erro no código ocorre porque a variável root que você está tentando acessar aqui:

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

não foi declarada em nenhum lugar. A pseudo classe :root utilizada no seu CSS aponta para o elemento raiz da página e para conseguir acessa-lo via js, você deve utilizar o caminho

document.documentElement

Geralmente esse elemento raiz é o html.

No seu caso, após as alterações, o código citado anteriormente ficaria da seguinte forma:

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

No entanto, sugiro que além disso, você reveja a forma e o porquê de como as variáveis ws e ad estão sendo utilizadas. Se o seu intuito for incrementar e decrementar os valores de acordo com a tecla pressionada, sugiro as seguintes alterações:

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;            
}

Após essas correções, o código executa normalmente.

Referências:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/:root
https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .