(Resolvido) Mostrar e retirar divs ao clicar

[douglasdamame]

Olá.

Estou tentando fazer uma pequena função que ao clicar em uma imagem deverá mostrar ou retirar determinadas Divs.

Eu estou conseguindo incrementar apenas uma Div e não consigo apaga-la, sei que o problema esta no var qtde = 0 que declarei, mas se eu tirar a função não funciona pois não teria o valor inicial para soma, deixando sempre começa com Zero, tentei colocar o var qtde em cada IF das Divs, mas não funcionou...

function expandir_formulario(acao){

var qtde = 0 

if (acao == '+1') {
var qtdediv = qtde+1
}
if (acao == '-1') {
var qtdediv = qtde-1
}

if (qtdediv == 0){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'none')
    xDisplay('capaexpansion3', 'none')
    var qtde = 0
 }
if (qtdediv == 1){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'block')
    xDisplay('capaexpansion3', 'none')
    var qtde = 1

 }

 if (qtdediv == 2){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'block')
    xDisplay('capaexpansion3', 'block')
    var qtde = 2

 }

}

O Html

<a href="java script:expandir_formulario(+1);" ><img src="imagens/mais.gif"  name="personas" width="20" height="20" border="0" value"2 "/></a>
<a href="java script:expandir_formulario(-1);" ><img src="imagens/menos.gif" width="20" height="20" border="0" /></a>


<div id=capaexpansion>
Formulario da div 1
</div>

<div id=capaexpansion2>
Formulario da div 2
</div>

<div id=capaexpansion3>
Formulario da div 3
</div>

Meu problema esta ao declarar

var qtde = 0

então apenas consigo mostrar a primeira Div e não consigo apagar pois seria como eu solicitasse var qtdediv = 0-1

Se puderem me ajudar, agradeceria muito

[fiote]

Pergunta besta:

Não estão faltando uns ; nesse código não?

De qualquer jeito, vá no firefox e mostre o erro que ele retorna (caso exista).

[douglasdamame]

Não gera nenhum erro, apenas não funciona....

[Jonathan Queiroz]

Pergunta besta:

Não estão faltando uns ; nesse código não?

O ";" (ponto-e-vírgula) em JavaScript é opcional caso cada instrução esteja em uma linha diferente !

É necessário apenas para escrever instruções em uma única linha

Exemplo:

alert("teste");alert("teste2");variavel+=5

O problema está em outro ponto... Olhe essas linhas:

<a href="java script:expandir_formulario(+1);" ><img src="imagens/mais.gif"  name="personas" width="20" height="20" border="0" value"2 "/></a>
<a href="java script:expandir_formulario(-1);" ><img src="imagens/menos.gif" width="20" height="20" border="0" /></a>

Você chama a função com os valores 1 e -1 (eles são do tipo numérico, já que não possui aspas) depois você faz a comparação dessa forma:

if (acao == '+1') {
var qtdediv = qtde+1
}
if (acao == '-1') {
var qtdediv = qtde-1
}

Ou seja, compara como se fossem do tipo string Você tem duas opções para corrigir o seu problema: 1. Deixar o formulário como está e modificar o JavaScript para trabalhar com campos do tipo número Nesse caso, você pode substituir:

qtddiv=qtde + acao

2. Modificar o HTML para enviar os valores como uma string (menos prático)

[douglasdamame]

Jonathan,

Obrigado por responder,

Alterei os dois para ficar mais fácil a visualuzação

ficando agora assim no java script:

function expandir_formulario(acao){

var qtde = 0

if (acao == 'aumenta') {
var qtdediv = qtde+1
}
if (acao == 'diminui') {
var qtdediv = qtde-1
}

if (qtdediv == 0){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'none')
    xDisplay('capaexpansion3', 'none')
    var qtde = 0
 }
if (qtdediv == 1){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'block')
    xDisplay('capaexpansion3', 'none')
    var qtde = 1
 }

 if (qtdediv == 2){
    xDisplay('capaexpansion', 'block')
    xDisplay('capaexpansion2', 'block')
    xDisplay('capaexpansion3', 'block')
    var qtde = 2
 }

}

E no Html

<a href="java script:expandir_formulario('aumenta');" ><img src="imagens/mais.gif"  width="20" height="20" border="0" /></a>
<a href="java script:expandir_formulario('diminui');" ><img src="imagens/menos.gif" width="20" height="20" border="0" /></a>

mas dá o mesmo propblema, pois apara funcionar eu tenho que indicar um valor inicial para qtde

var qtde=0

A primeira vez que eu clico funciona e abre a nova div, na segunda vez já não funciona, pois a funcão entende que seria var qtdediv=0 + 1 (var qtdediv=qtde + acao) e esta div já esta aberta..... se eu clicar em diminuir ele entende qtdediv=0 - 1, então não fecha nada....

Como eu faço para a cada ação tomada, a variável qtde receba um novo valor e não leia mais o primeiro valor atribuido??

[fiote]

Coloque o var qtde = 0 fora da função ;)

Sobre os ponto-e-vírgulas, lol que eu não sabia.

Editado Fevereiro 25, 2009 por fiote

[douglasdamame]

Se eu colocar fora da função ela não funciona

[fiote]

Malz.

Nos seus IFs de qtdediv, mude o var qtde = xxx para qtde = xxx (tire os var).

[douglasdamame]

Nada feito,

sempre que solicito uma acão, a função pega o primeiro valor para a variável qtde, ou seja, sempre será 0,..... acho que teria que fazer um contador, mas como meu conhecimento em JS é ridículo, não faço a menor idéia de como fazer

[fiote]

Ok, vamos resolver isso:

JS

<script language='javascript'>
var qtde = 3;
    
function expandir_formulario(diff){
    qtde = qtde + diff;
    
    if (qtde < 0) qtde = 0;
    if (qtde > 3) qtde = 3;

    document.getElementById('capaexpansion' ).style.display = (qtde >= 1) ? 'block' : 'none';
    document.getElementById('capaexpansion2').style.display = (qtde >= 2) ? 'block' : 'none';
    document.getElementById('capaexpansion3').style.display = (qtde >= 3) ? 'block' : 'none';
}
</script>

HTML

<a href="java script:expandir_formulario(-1);" >[ - ]</a>
<a href="java script:expandir_formulario(+1);" >[ + ]</a>

Arruma as imagens ae ;)

Ps: Se quiser ter o primeiro div (capaexpansion) sempre visível, basta retirar a linha referente a ele e mudar a linha que checa se qtde é menor que zero, pra menor do que 1 (e setando igual a 1).

Editado Fevereiro 25, 2009 por fiote

[douglasdamame]

PERFEITO !!!!

Muito obrigado..... era isso mesmo!!!

Se precisar de alguma ajuda em ASP é só pedir.... estou te devendo !!!

Valeu!!