Javascript só funciona uma vez

[danielcambui2 0]

Boa tarde pessoal. Minha dúvida é a seguinte:

 

utilizando um campo select eu quero controlar o estilo (display) de uma Div. usei o javascript abaixo, ele funciona na primeira vez que se clica num item do select. Mas depois dá erro. ou seja, ele não controla mais o display da div e a camada some. Qual seria solução?

 

 

function pegarValor( el ) {

       if( el.value == 'aracaju' ){
           vito.style.display='none'; 
  		    salv.style.display='none'; 
  		    arac.style.display='visible'; 
       }
       else if(el.value == 'salvador' ){
		vito.style.display='none'; 
       	 salv.style.display='visible'; 
  		  arac.style.display='none';         }
	        else if(el.value == 'vitoria' ){
		vito.style.display='visible'; 
  		    salv.style.display='none'; 
  		    arac.style.display='none';         }  
}

 

<form>
<select id="choice" onchange="pegarValor( this );">
<option value="aracaju">Aracaju</option>
<option value="salvador">Salvador</option>
<option value="vitoria">Vitória da Conquista</option>
</select>
</form>
</div>

<div id="arac">arac</div>
<div id="salv">salv</div>
<div id="vito">vito</div>

[William Bruno 1501]

você precisa definir as variaveis, e o estilo para "a mostra", é block, e não visible

 

 

  var vito = document.getElementById('vito');
  var salv = document.getElementById('salv');
  var arac = document.getElementById('arac');

       if( el.value == 'aracaju' ){
           vito.style.display='none'; 
                   salv.style.display='none'; 
                   arac.style.display='block'; 

 

como dica de melhoria, veja como faço a lógica aqui:

http://wbruno.com.br/blog/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

 

e para debugar melhor teus scripts:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[danielcambui2 0]

Bacana teu blog, vou lê-lo todo pra ver se aprendo alguma coisa. Como dá pra perceber não sei fazer nada em javascript. rsrs

 

Bem, ficaria assim?

var vito = document.getElementById('vito');
var salv = document.getElementById('salv');
var arac = document.getElementById('arac');

function pegarValor( el ) {

       if( el.value == 'aracaju' ){
           vito.style.display='none'; 
  		    salv.style.display='none'; 
  		    arac.style.display='block'; 
       }
       else if(el.value == 'salvador' ){
		vito.style.display='none'; 
       	 salv.style.display='block'; 
  		  arac.style.display='none';         }
	        else if(el.value == 'vitoria' ){
		vito.style.display='block'; 
  		    salv.style.display='none'; 
  		    arac.style.display='none';         }  
}

 

Fiz isso, mas nao deu certo

[William Bruno 1501]

defina as variaveis dentro da função, se não elas terão valor nulo

 

(explico isso no post sobre debugar javascript).

[ma_gr 2]

Não sei se este tópico tá fechado ou não mas minha dúvida é parecida. No script abaixo o efeito na galeria de imagens funciona normalmente com uma galeria apenas na página, que se encontra dentro de div class container. Quando adiciono mais uma galeria na mesma página, copiando o código igual ao primeiro, só trocando as imagens, a segunda galeria não funciona o efeito. A primeira continua normal. É conflito por causa dos ID's que são os mesmos ou as funções terminam após o return false? Já removi os return mas não adiantou.

 

 

$(function() {
				
	var $wrapper 			= $( '#th-wrap' ),
		$img				= $wrapper.children( 'img' ),
		// https://github.com/twitter/bootstrap/issues/2870
		transEndEventNames	= {
			'WebkitTransition'	: 'webkitTransitionEnd',
			'MozTransition'		: 'transitionend',
			'OTransition'		: 'oTransitionEnd',
			'msTransition'		: 'MSTransitionEnd',
			'transition'		: 'transitionend'
		},
		transEndEventName	= transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		endCount			= 0,
		isAnimating			= false,
		notsupported		= !Modernizr.csstransforms || !Modernizr.csstransforms3d || !Modernizr.csstransitions;

	$( '#th-view' ).on( 'click', toggleView );
	
	function toggleView() {

		var $btn = $( this );
		
		if( !isAnimating ) {

			isAnimating = true;
			
			var view = $wrapper.data( 'view' );
			
			if( view === 'thumbs' ) {
				
				$wrapper.data( 'view', 'single' );
				$btn.removeClass(' th-toggle-active' );
				if( notsupported ) {

					$wrapper.removeClass( 'th-active' ).children( 'div.th-inner' ).hide();
					isAnimating = false;
					return false;
				
				}
			
			}
			else {
				
				$wrapper.data( 'view', 'thumbs' );
				$btn.addClass(' th-toggle-active' );
				if( notsupported ) {

					$wrapper.addClass( 'th-active' ).children( 'div.th-inner' ).show();
					isAnimating = false;
					return false;
				
				}

			}
			
			$wrapper.children( 'img' )
					.remove()
					.end()
					.children( 'div.th-inner' )
					.show()
					.wrap( $( '<div class="th-part"></div>' ) )
					.append( '<div class="th-overlay"></div>' )
					.parent()
					.clone()
					.appendTo( $wrapper );
					
			$wrapper.append( '<div class="th-part"></div>' )
					.prepend( $( '<div class="th-part"></div>' ) )
					.find( 'div.th-part' )
					.on( transEndEventName, function( event ) {
						
						++endCount;
						// 4 transitions
						if( endCount === 4 ) {
							
							$wrapper.off( transEndEventName );
							endCount = 0;
							clear( view );

						}
						
					} ) ;
					
			setTimeout( function() { ( view === 'thumbs' ) ? $wrapper.removeClass( 'th-active' ) : $wrapper.addClass( 'th-active' ); }, 0 );

		}
		
		return false;
	
	}

	function clear( view ) {
		
		$wrapper.find( 'div.th-inner:first' ).unwrap().end().find( 'div.th-overlay' ).remove();
		var $inner = $wrapper.find( 'div.th-inner' );
		( view !== 'thumbs' ) ? $inner.show() : $inner.hide();
		$wrapper.find( 'div.th-part' ).remove();
		$img.prependTo( $wrapper );
		isAnimating = false;

	}


});

[William Bruno 1501]

não duplique IDs.

[ma_gr 2]

nesse caso entao tenho que repetir o script pra cada galeria trocando os ID's? Ou tem outra forma, como o UpdatePanel do asp.net? (nao tenho conhecimento em asp mas vi qualquer coisa nesse sentido).