Duvidas sobre Javascript

Zmey · Fevereiro 2, 2010

Olá a todos =)

Ontem eu resolvi começar a aprender um pouquinho de JavaScript, pois vem me fazendo falta em alguns pequenos sites que faço usando CSS/XHTML. Como eu já programo em C há algum tempo, não estou tendo grandes dificuldades (Já consegui fazer coisinhas legais, como randomizar imagem, galeria de imagens bla bla bla). Mas estou com um problema que desde ontem não consigo solucionar e nem mesmo entender o que está ocorrendo. Antes de tudo, vou postar os códigos do script que eu estava tentando fazer.

window.onload = initAll;

function initAll ()
{
document.getElementById("purple").onclick = changePageBackground("purple");
document.getElementById("yellow").onclick = changePageBackground("yellow");
document.getElementById("pink").onclick = changePageBackground("pink");
document.getElementById("black").onclick = changePageBackground("black");
}

function changePageBackground (color)
{
switch (color)
{
case "purple":
{
document.body.style.backgound = "#90C";
break;
}
case "yellow":
{
document.body.style.backgound = "#FF0";
break;
}
case "pink":
{
document.body.style.backgound = "#F0F";
break;
}
case "black":
{
document.body.style.backgound = "#000";
break;
}
default:
{
document.body.style.backgound = "#FFF";
}
}
return false;
}

O código HTML está aqui:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="backgrounds.js"></script>
</head>

<body>
	<form method="post" action="">
		<input type="submit" value="Purple!" id="purple" />
		<input type="submit" value="Yellow!" id="yellow"/>
		<input type="submit" value="Pink!" id="pink"/>
		<input type="submit" value="Black!" id="black"/>
	</form>
</body>
</html>

Bem, agora vamos ao problema: Simplesmente, não funciona =) A ideia é criar uma página com 4 botões, que conforme o usuário clique neles, o background mude para a cor descrita no botão.

Tem 2 coisas até agora que notei, e que não fazem sentido para mim:

1ª: a função "changePageBackground" está sendo chamada no carregamento da página mesmo sem eu clicar em botão algum. Em outro script que eu fiz, eu chamei uma função no onclick sem passar argumento algum para esta função. Por exemplo.: document.getElementById("algumId").onclick = facaAlgo; Se eu passar argumentos para a função 'facaAlgo' ela é chamada no carregamento mesmo sem eu clicar no elemento de id 'algumId'. Alguém sabe me explicar porque isso ocorre?

2ª: Ao clicar em um botão qualquer, como por exemplo o black, o switch não cai na condição certa. Em vez disso, executa todas as condições (menos o default)! É como se o break não tivesse efeito. Na verdade, ele não executa o comando "document.body.style.backgound = "#000";". Eu descobri que ele passa por todos os cases colocando alerts neles.

Agradeço desde já =D

Editado Fevereiro 2, 2010 por Zmey

lobismano · Fevereiro 2, 2010

E ai, beleza.

Fiz umas alterações e segue alguns comentarios.

1- Como você quer mudar apenas as cores da página use os botões do tipo button e não submit, pois os submit resetam a pagina.

2- a chamada da função tava errada

3- Tinha um erro no document.body.style.background que estava backgound sem o R de GROUND.

4- O evento de clique é no botão chamando a primeira função. onClick="initAll(this.id)".

Espero ter ajudado.

At.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>
function initAll(valor)
{
changePageBackground(document.getElementById(valor).id);
}

function changePageBackground (color)
{
    switch (color)
    {
        case "purple":
        document.body.style.background = "#90C";
        break;

        case "yellow":
        document.body.style.background = "#FF0";
        break;

        case "pink":
        document.body.style.background = "#F0F";
        break;

        case "black":
        document.body.style.background = "#000";
        break;
        
        default:
        document.body.style.background = "#FFF";
        break;
    }
}
</script>

</head>

<body>
<form>
<input type="button" value="Purple!" id="purple" onClick="initAll(this.id)"/>
<input type="button" value="Yellow!" id="yellow" onClick="initAll(this.id)"/>
<input type="button" value="Pink!" id="pink" onClick="initAll(this.id)"/>
<input type="button" value="Black!" id="black" onClick="initAll(this.id)"/>
</form>
</body>
</html>

Zmey · Fevereiro 2, 2010

Bem, sobre os botões submit, eu não sabia mesmo que resetavam a página, achei que funcionava igual a button. Valeu pela dica!

Você disse que o evento onClick é no botão, certo? Então quer dizer que eu não devo usar .onClick (ou outros eventos como onblur, onchange) parte de scripts, mas só no html?

lobismano · Fevereiro 3, 2010

beleza.

Pode usar, mas neste caso é para execução do comando.

Ex.

function executa()

{

document.form[0].submit;

}

</script>

Quando chamar a funcão executa(), dá-se um submit na pagina através de um link, clique em imagem, etc.

At.

Entrar

Duvidas sobre Javascript

Pergunta

Zmey

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lobismano

Link para o comentário

Compartilhar em outros sites

Zmey

Link para o comentário

Compartilhar em outros sites

lobismano

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades