Questão sobre HTML

Mensagem por **helioneves** » 07 mar 2026, 11:47

Tenho uma pedra no sapato relacionada com HTML... queria usar o evento "onclick" para mudar a cor de fundo de uma página; ( supostamente ) o seguinte código devia tratar do assunto:

<html>
<body>
Click anywhere in this window to change the background color of body
<script>
window.onclick = myFunction;
function myFunction() {
var cor=document.body.style.backgroundColor;
if(cor=="#000") document.body.style.backgroundColor="#fff";
else document.body.style.backgroundColor="#000";
}
</script>
</body>
</html>

Portanto, eu queria que a cada "clicadela" no rato, o fundo da página alternasse entre preto e branco... o que estou a fazer mal?

Mensagem por **Mestre Verde** » 08 mar 2026, 21:26

Primeiro ponto: não sei o que usas para criar os teus programas (um editor de texto ou um IDE), mas eu aconselho a usar rgb(0 a 255 (vermelho), 0 a 255 (verde), 0 a 255 (azul)) em vez de hexadecimal.

Experimenta este código

Código: Selecionar todos

<html>
<body>
Clica em qualquer lugar para mudar de cor
<script>
let preto = false;

window.onclick = function() {
    if(preto){
        document.body.style.backgroundColor = "white";
    } else {
        document.body.style.backgroundColor = "black";
    }
    preto = !preto;
}
</script>

</body>
</html>

ou este se souberes que o Brawser que vais usar tem de certeza o fundo branco, se não aplicares nada como background:

Código: Selecionar todos

<html>
<head>
<style>
.preto {
    background-color: black;
}
</style>
</head>

<body>

Click anywhere in this window to change the background color

<script>
window.onclick = function() {
    document.body.classList.toggle("preto");
}
</script>

</body>
</html>

Mensagem por **Coldhx** » 08 mar 2026, 22:03

O problema é que o formato da propriedade

Código: Selecionar todos

document.body.style.backgroundColor

não é hexadecimal (tipo #000) mas uma string tipo

Código: Selecionar todos

rgb(0, 0, 0)

Podes resolver ao trocar o teu if para...

Código: Selecionar todos

if(cor=="rgb(0, 0, 0)")

... mas a solução ideal passa por não fazer comparação de strings e guardar o estado numa variável separada (como é exemplo da resposta acima, a variavel "preto").

Mensagem por **Mestre Verde** » 09 mar 2026, 19:56

Boa, referi em cima o formato rgb e esqueci-me de substituir no código, eu também....

Mensagem por **helioneves** » 11 mar 2026, 14:20

obrigado meus senhores pelas respostas!
Entretanto tinha descoberto num outro fórum o problema do meu código ( não é só aqui que há gente prestável...

)
apesar de ainda não perceber porque é que o seguinte código não devolve absolutamente nada:

document.write(document.body.style.backgroundColor);

mas enfim, não se pode ter tudo...

Mensagem por **helioneves** » 22 abr 2026, 21:23

e então, para que o "serviço público" seja "completo", deixo aqui o "resultado final"...
{ o meu "ficheiro" também incorpora uns "links" que me dão muito jeito... peço desculpa por o endereço aqui do fórum não constar...

}

Código: Selecionar todos

<html>
<head>
<style>
body{padding:0;margin:0;border:0;background:#FFF;color:#FFF;}
a{display:block;font-size:160px;line-height:70%;text-decoration:none;text-align:center;padding:0;margin:0;border:0;}
a,a:link,a:visited{color:inherit;}
.d{background-color:#000;color:#000;}
a:hover{color:red;}
a:active{color:green;}
</style>
</head>
<body>
<a href="http://gmail.com">GMAIL</a>
<a href="http://google.com">GOOGLE</a>
<a href="http://googlemaps.com">GOOGLE-MAPS</a>
<a href="http://translate.google.com">G-TRADUTOR</a>
<script>
window.onclick=f;
function f(){
document.body.classList.toggle('d');
}
</script>
</body>
</html>

offtopic: porque será que sempre que o assunto tem a ver com informática, o pessoal trata-se entre eles por "tu", mesmo que o resto do tempo e noutros "temas" se tratem por "sr." ?...

Mensagem por **Coldhx** » 22 abr 2026, 22:08

helioneves Escreveu: 22 abr 2026, 21:23 offtopic: porque será que sempre que o assunto tem a ver com informática, o pessoal trata-se entre eles por "tu", mesmo que o resto do tempo e noutros "temas" se tratem por "sr." ?...

Porque informática é só malta porreira

Em termos funcionais está impecável! Para ficar compliant, de acordo com o "RTIEBT" do HTML

falta pouca coisa:

- A primeira linha de qualquer documento HTML deve indicar a versão utilizada, geralmente segue-se HTML5 e declara-se assim:

Código: Selecionar todos

<!DOCTYPE html>

- A secção <head> tem de conter sempre um <title>, este valor é mostrado na barra de título da janela/tab

Código: Selecionar todos

<title>A minha página</title>

Com as alterações ficaria assim:

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title>A minha página</title>
<style>
body{padding:0;margin:0;border:0;background:#FFF;color:#FFF;}
a{display:block;font-size:160px;line-height:70%;text-decoration:none;text-align:center;padding:0;margin:0;border:0;}
a,a:link,a:visited{color:inherit;}
.d{background-color:#000;color:#000;}
a:hover{color:red;}
a:active{color:green;}
</style>
</head>
<body>
<a href="http://gmail.com">GMAIL</a>
<a href="http://google.com">GOOGLE</a>
<a href="http://googlemaps.com">GOOGLE-MAPS</a>
<a href="http://translate.google.com">G-TRADUTOR</a>
<script>
window.onclick=f;
function f(){
document.body.classList.toggle('d');
}
</script>
</body>
</html>

Mensagem por **helioneves** » 22 abr 2026, 22:34

o Sr. Engenheiro tem [ a devida ] noção que se o Eduardo Catroga visse este tópico, o mais certo seria ele dizer algo do estilo " estão p'ra aí a discutir pentelhos... " { estimo que tenha idade para ter "bagagem" para perceber do que falo... }

footnote: esta malta com tantas "reservas" em não divulgar a idade no perfil, mais parecem senhoras "maduras" a não querer revelar quantos anos contam...

Questão sobre HTML

Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML

Re: Questão sobre HTML