[Resolvido] Div

Carcleo · Novembro 4, 2009

Ola pessoal,

Tenho uma função que oculta div's, cisa simples.

function esconde(a, B)
{
document.getElementById('a').style.display="none";
document.getElementById('b').style.display="none";
}

A ideia é chamar esta função através de um radio buton assim:

]

Passando por parametros a e b, os nomes das div's que serão ocultadas.

O problema é que nessa parte : document.getElementById('a'), esse 'a', é o nome da div mas eu quero trocar esse nome da div por uma variavel que recebera o nome da div no momento em que a funçao for chamada.

Nesse código que eu fiz |(por favor não riam), da o seguinte erro: Objeto esperado.. Mas não fala que bendito objeto esperado é esse.

Obrigado a quem puder ajudar.

iRCC · Novembro 4, 2009

o objeto que ele está esperando é o elemento que tem como id 'a' e como este elemento nao existe vai dar erro.

tente assim

document.getElementById(a).style.display = "none";

William Bruno · Novembro 4, 2009

Se você quer varíaveis, não coloque elas entre aspas.

function esconde( a, b )
{
   document.getElementById( a ).style.display="none";
   document.getElementById( b ).style.display="none";
}

Tem como melhorar esse código.. mas ai é outra história.

Carcleo · Novembro 4, 2009

o objeto que ele está esperando é o elemento que tem como id 'a' e como este elemento nao existe vai dar erro.

tente assim
document.getElementById(a).style.display = "none";

Fiz e deu o mesmo erro:

Veja meu código completo:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script>
function mostra(a)
{  
document.getElementById(a).style.display = "block";
}

function esconde(a, B)
{
document.getElementById(a).style.display = "none";
document.getElementById(B).style.display = "none";
}
</script>

</head>

<body>

<div id="div1" style="display:block;">MOSTRAR DIV 1</div>
<div id="div2" style="display:none;">MOSTRAR DIV 2</div>
<div id="div3" style="display:none;">MOSTRAR DIV 3</div>


<form id="form1" name="form1" method="post" action="">
  <table width="200">
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div1" onClick="mostra(div1); esconde(div2,div3)" checked/>
        div1</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div2" onClick="mostra(div2); esconde(div1,div3)"/>
        div2</label></td>
    </tr>
 <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div3" onClick="mostra(div3); esconde(div2,div3)"/>
        div3</label></td>
    </tr>
  </table>
</form>
</body>
</html>

William Bruno · Novembro 4, 2009

Aqui você deve colocar aspas:

<input type="radio" name="RadioGroup1" value="div1" onclick="mostra( 'div1' ); esconde( 'div2', 'div3' )" checked="checked" />

percebe a diferença ?

E se não me engano, você quer esconder a div1 e div2 ao clicar no terceiro input, ne?!

iRCC · Novembro 4, 2009

Agora ta funcionando,com o William Bruno falou, você tem que por aspas quando passa o parametro e nao quando usa ele dento do js.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script>
function mostra(a)
{
	debugger;
	document.getElementById(a).style.display = "block";
}

function esconde(a, B)
{
document.getElementById(a).style.display = "none";
document.getElementById(B).style.display = "none";
}
</script>

</head>

<body>

<div id="div1" style="display:block;">MOSTRAR DIV 1</div>
<div id="div2" style="display:none;">MOSTRAR DIV 2</div>
<div id="div3" style="display:none;">MOSTRAR DIV 3</div>


<form id="form1" name="form1" method="post" action="">
  <table width="200">
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div1" onclick="mostra('div1'); esconde('div2','div3')" checked/>
        div1</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div2" onclick="mostra('div2'); esconde('div1','div3')"/>
        div2</label></td>
    </tr>
 <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div3" onclick="mostra('div3'); esconde('div2','div2')"/>
        div3</label></td>
    </tr>
  </table>
</form>
</body>
</html>

Carcleo · Novembro 4, 2009

Aqui, na boa, se voces fossem garotas eu ia dar um beijo na boca de cada uma. Mas, ............ deixa pra lá.

Deu certo.

Segue o codigo inteiro para voces olharem e muito obrigado.

Agora, antes, só mais uma coisa:

Um colega atras disse que poderia melhorar ainda mais essa código. Como?

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script>
function mostra(a)
{  
document.getElementById(a).style.display = "block";
}

function esconde(a, B)
{
document.getElementById(a).style.display = "none";
document.getElementById(B).style.display = "none";
}
</script>

</head>

<body>

<div id="div1" style="display:block;">MOSTRAR DIV 1</div>
<div id="div2" style="display:none;">MOSTRAR DIV 2</div>
<div id="div3" style="display:none;">MOSTRAR DIV 3</div>


<form id="form1" name="form1" method="post" action="">
  <table width="200">
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div1" onClick="mostra('div1'); esconde('div2','div3')" checked/>
        div1</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="'div2'" onClick="mostra('div2'); esconde('div1','div3')"/>
        div2</label></td>
    </tr>
 <tr>
      <td><label>
        <input type="radio" name="RadioGroup1" value="div3" onClick="mostra('div3'); esconde('div1','div2')"/>
        div3</label></td>
    </tr>
  </table>
</form>
</body>
</html>

William Bruno · Novembro 4, 2009

Dessa forma:

<!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=iso-8859-1" />
	<title>Untitled Document</title>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function toggleDivs( el )
{
	var esconder = id('esconder');
	var divs = esconder.getElementsByTagName('div');
	
	for( var i=0; i<divs.length; i++ ){
		divs[i].style.display = 'none';
	}	
	id( el.value ).style.display = 'block';
}
</script>
<style type="text/css">
form label{
	display: block;
	margin: 5px 0;
}
</style>
</head>

<body>

	<div id="esconder">
		<div id="div1" style="display:block;">MOSTRAR DIV 1</div>
		<div id="div2" style="display:none;">MOSTRAR DIV 2</div>
		<div id="div3" style="display:none;">MOSTRAR DIV 3</div>
	</div><!-- /esconder -->

	<form id="form1" name="form1" method="post" action="">
		<label><input type="radio" name="RadioGroup1" value="div1" onclick="toggleDivs( this );" checked="checked" />div1</label>
		<label><input type="radio" name="RadioGroup1" value="div2" onclick="toggleDivs( this );"/>div2</label>
		<label><input type="radio" name="RadioGroup1" value="div3" onclick="toggleDivs( this );"/>div3</label>
	</form>
	
</body>
</html>

assim você pode ter infinitas DIVs, e infinitos radios.

Pois a minha única função, esconde todas as DIVs que estiverem dentro de <div id="esconder"> e mostra a referente ao value do radio.

Sem você precisar se preocupar, em quais tem que esconder, quais tem que mostrar, evitando assim, que precise passar vááários parâmetros.

Carcleo · Novembro 4, 2009

Ok.

Deu certo tambem.

Estou com um outro pepino;

Preciso fazer um loop (em JavaScript) para saber qual RadioButton esta checkado num conjunto de 5 RadioButton para gerar um cookie com o value dele.

Como faço essa função?

Obnrigado a quem puder ajudar.

William Bruno · Novembro 4, 2009

Tentou? como? ^_^

você já sabe do que precisa:

-> fazer um loop (onde? nos rádios button)

-> para verificar qual tá setado ( veja o valor do atributo checked )

tente implementar, e volte com as dúvidas.

Carcleo · Novembro 4, 2009

Bom, a ideia é:

Um grupo de radio buttons com a mesma name (claro) porem, cada um radio button tem o seu value (risos).

Preciso pegar o value do radio button do conjunto que esta selecionado (checado) no momento em que o usuario sair da pagina ou sair do browser para depois eu tomar outra cossa: gravar um cookie coim esse value. Depois, quando o usuario retornar, verificar qual era o radiobutton que estava checkado no momento em que ele saiu da pagina.

Eu fiz assim mas não grava o cookie nada no disco:

<script>
function GeraCookie() 
 {
//var curCookie = "radiochecado= " + document.orcamento.config.value;  
var curCookie = "radiochecado= " + document.getElementById('config').value;
document.cookie = curCookie;
}
</script>

Carcleo · Novembro 4, 2009

Sabe, cheguei no sacript abaixo que coloquei no header da pagina

function setarCookie(name,valor)
{
        var hoje = new Date();
        var expira = new Date(hoje.getTime()+999*24*60*60*1000);
        var expira = expira.toGMTString();
        document.cookie = name+"="+valor+";expires="+expira;
}

Que é chamada do body da pagina assim:

<script>setarCookie('radiochecado',document.getElementById('config').value);</script>

Que a ideia é pegar a opção (value) do radiobutton de id=config que esta checkado (selecionado) e gravar no cookie da seguinte forma:

radiochecado=AMD (POR EXEMPLO, POIS AQUI VAI O VALUE DO RADIO BUTTON CHECKADO)

Estou com dois problemas:

1) não estou conseguindo pegar o value do radiobutton checkado e

2) quando coloco uma outra coisa qualquer no lugar dele, por exemplo AZUS, ai la no cookie grava assim:

radiochecadoAZUS e não assim:

radiochecado=AZUS

Como resolver isso?

Obrigado.

Arquivado

[Resolvido] Div

Recommended Posts

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante