Passar variavel js para <div class=""> ? {RESOLVIDO !}

Front-end
#1

Ola pessoal. Boa tarde a todos.

To com uma duvida sobre html e javascript, apos pesquisar um pouco na net resolvi postar aqui, talvez alguem mais expert da um help mais rapido.

Tenho o codigo abaixo (javascript e html), preciso passar as variaveis js av_container / av_color para duas div’s (como codigo abaixo). Esses valores sao pescados em um arquivo css, de modo que muda as propriedades visuais da pagina etc. De acordo com o que vai sendo selecionado, se monta string’s tipo exemplo: container11, body11 etc, que estao definidos no arquivo css.
To tentando assim, mas nao ta funcionando.

<form id="form">    
             <div class="containerBody">Testes Container: </div>  
             <div class="colorBody">Testes Body: </div>  
</form>

Agradeco a forca.
Obrigado e abs!!!

<html>
	<head>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	
	<script type="text/javascript">
	
		var av_container = document.getElementsByClassName("containerBody");
		var av_color = document.getElementsByClassName("colorBody");
		
		av_container = "container";
		av_color = "body";
		var val_avCtr;
		var val_avCor;
		var val_avBdy;
		var val_avPti;
		
		function writer_(avCtr){
			val_avCtr = document.getElementById("avContainer");
			val_avCtr.value = avCtr;
		}		
		function writer_1(avCor){
			val_avCor = document.getElementById("avColor");
			val_avCor.value = avCor;			
			if((val_avCor != null && val_avCor != '') && (val_avCtr != null && val_avCtr != '')){
			   val_avCtr.value = "";
			   av_container += val_avCtr.value + val_avCor.value;
			   alert("CONTAINER: " + av_container);
			   this.clean_();
			}			
		}		
		function writer_2(avBdy){
			val_avBdy = document.getElementById("avBody");
			val_avBdy.value = avBdy;
		}		
		function writer_3(avPti){
			val_avPti = document.getElementById("avPunt");
			val_avPti.value = avPti;
			if((val_avPti != null && val_avPti != '') && (val_avBdy != null && val_avBdy != '')){
			   av_color += val_avBdy.value + val_avPti.value;
			   alert("BODY: " + av_color);
			   this.clean_();
			}
		}		
		function clean_(){
			this.av_container = "container";
			this.av_color = "body";
		}
	
	</script>
	
	</head>
	<body>
		<span>AV_CONTAINER:</span><br/>
		AvContainer: <select id="avContainer" onchange="writer_(this.value)">
				<option value="0" id="avCont0"></option>
				<option value="1" id="avCont1">1</option>
				<option value="2" id="avCont2">2</option>
				<option value="3" id="avCont3">3</option>
				<option value="4" id="avCont4">4</option>
			</select>

		<br/>
		
		AvColor: <select id="avColor" onchange="writer_1(this.value)">
				<option value="0" id="avColor0"></option>
				<option value="1" id="avColor1">1</option>
				<option value="2" id="avColor2">2</option>
				<option value="3" id="avColor3">3</option>
				<option value="4" id="avColor4">4</option>
			</select>

		<br/>
		<br/>
		<span>AV_BODY:</span><br/>
		
		AvBody: <select id="avBody" onchange="writer_2(this.value)">
				<option value="0" id="avBody0"></option>
				<option value="1" id="avBody1">1</option>
				<option value="2" id="avBody2">2</option>
				<option value="3" id="avBody3">3</option>
				<option value="4" id="avBody4">4</option>
			</select>

		<br/>
		
		AvPunti: <select id="avPunt" onchange="writer_3(this.value)">
				<option value="0" id="avPunti0"></option>
				<option value="1" id="avPunti1">DE 01 A 10</option>
				<option value="2" id="avPunti2">DE 11 A 20</option>
				<option value="3" id="avPunti3">DE 21 A 30</option>
				<option value="4" id="avPunti4">DE 31 A 40</option>
			</select>
		<form id="form">	
		     <div class="containerBody">Testes Container: </div>
		     <div class="colorBody">Testes Body: </div>
		</form>
		
	</body>
</html>
#2

help me please :slight_smile:

#3

Não entendi o que quer exatamente.

Vc quer pegar o valor do select e por na div?
Se for faz assim:

function setValue(select,div){
  var v = select.options[select.selectedIndex].value; // valor selecionado do select
  documento.getElementById(div).innerHTML = v; // nao e legal fazer assim, mas funciona
}
...
<select ... onchange="setValue(this, 'divXyz')">
...
<div id="divXyz">
...

De toda forma tente usar um framework jus para isso, como o jQuery.

#4

Oi lsjunior . Bascicamente o que eu preciso e, passar uma variavel javascript como o valor da class (css) da div, como exemplo abaixo.

avtContainer = document.getElementsByClassName("containerBody");
avtContainer = "container12";	
<div class="containerBody" id="containerBody">Container: </div>

Agradeco sua forca.
Abs,
Edvaldo

#5

Ops… Galerinha, Depois de passar o final de semana pensando um pouco (front end), :-), consegui resolver.

Vlw a forca.
Abs e boa semana.
Edvaldo

#6