Utilización de variables en html

[brown]

Saludos. Mi primer mensaje en este foro para intentar resolver un problema que tengo... Os comento: tengo una elección que hacer en una página html guardando un dato en una variable. Ese dato lo paso en la propia dirección del enlace a otro html, y me hago con él gracias a un pequeño código "descodifidor" en Javascript. El asunto es que, en base a ese valor, tengo que cargar unas imágenes u otras en la página, y poner unos colores de fondo en las tablas u otros. Soy capaz mediante Javascript de realizar la decisión con un "if", y determinar el código del color que necesito usar en una variable, pero luego no soy capaz de emplear esa variable dentro del "bgcolor=" de la tabla. No sé si es cuestión de sintaxis o es que no se puede hacer de esta forma, pero agradecería mucho vuestra ayuda. Un saludo.

[caricatos]

Hola brown, bienvenido a los foros :

No es tan difícil, pero tendríamos que saber que valor recibes, pero te daré un ejemplo sencillo:

Si tu variable se llama "variable" y puede recibir números (0, 1, 2), la URL sería:

www.tuSitio.com/index.html?variable=1

La obtendrías con:
var entrada = document.location.search.substr(1).split("&");
for (var i = 0; i < entrada.length; i++)
eval("var " + entrada[i].split("=")[0] + " = '" + entrada[i].split("="][1] + "'");
// Tampoco importa como recoges los datos, pero suponiendo que te queda así:
var variable = "1";

switch (variable) {
case "1":
document.images["tuImagen"].src = "imagen1.gif";
document.getElementById("tuTabla").style.backgroun dColor = "blue";
break;
// aquí el resto de los casos
}

Espero que te sirva.

Saludos

P.D: Por cierto, es mejor usar el foro javascript para estos casos.

[brown]

Antes de nada gracias por la bienvenida y por la rápida respuesta.
Sobre lo de colocar este tema en javascript, lo he valorado, pero es que la idea que yo tenía era de hacer el asunto en html, sin usar javascript, pero claro, ya os he comentado que no sé si esto es posible. Para que os agáis una idea, yo apenas sé casi nada de programación web, tan solo usar dreamweaver para lo básico y a raiz de ello, entender un poquito de html. Pero vamos, javascript, para que os hagáis una idea, sólo me suena por su parecido con Visual Basic, de lo que también entiendo algo. Vamos, que un poquito de cada, pero no mucho de nada.
Bueno, al tema... Imagino que todo lo que me has escrito es código javascript, y que irá dentro de las etiquetas <script> y </script>, no? Por otra parte, no hay forma, como planteaba yo en la cuestión, de hacer una llamada desde html a una variable que haya sido pasada de otro html como había descrito antes? Pues nada, un saludo de nuevo y muchas gracias por la información.

[caricatos]

Hola otra vez:

html es un lenguaje, pero no de programación, sino de marcas, y tal como tienes un decodificador para obtener una variable, tendrías que añadirle las instrucciones switch para tu propósito... Si nos dices algunos de los colores y de las imágenes, te podríamos preparar un código.

Saludos

[brown]

De acuerdo. Mañana os explico en más profundidad el tema si os parece. Muchas gracias por el interés.

[brown]

Bueno, vamos con parte del código:
En el frameset que alberga los 2 marcos que necesito cargo la dirección de cada htm seguido de la variable, así:
<frame src="menu_dos.htm?elec=2" name="Menu" frameborder="no" scrolling="NO" noresize marginwidth="0" marginheight="0" id="Menu">
<frame src="informacion/actuales2.htm?elec=2" name="Principal" frameborder="no" scrolling="auto" marginwidth="0" marginheight="0" id="Principal">

Después, en el propio htm llamado "actuales2.htm", consigo el valor de la variable que he pasado con el siguiente código javascript:
<script language="JavaScript">
<!--
cadVariables = location.search.substring(1,location.search.length );
arrVariables = cadVariables.split("&");
for (i=0; i<arrVariables.length; i++) {
arrVariableActual = arrVariables[i].split("=");
if (isNaN(parseFloat(arrVariableActual[1])))
eval(arrVariableActual[0]+"='"+unescape(arrVariableActual[1])+"';");
else
eval(arrVariableActual[0]+"="+arrVariableActual[1]+";");
}
</script>

Y ahora es cuando hago la elección con un "if":
if (elec==1)
{
fondo="186D09";
} else {
fondo="881111";
}

En esa nueva variable "fondo", quiero guardar el código del color a cargar en la primera tabla que tiene el htm, que viene dada así:
<table width="500" border="0" cellpadding="0" cellspacing="0" id="titulo">
<tr>
<td width="51"><img src="../imagenes/barra1_rojo1.gif" width="51" height="50"></td>
<td width="500" height="50" class="Estilo23">&nbsp;<span class="Estilo26">Noticias Actuales</span> </td>
<td width="26"><img src="../imagenes/barra2_rojo.gif" width="26" height="50"></td>
</tr>
</table>

Los nombres de las imágenes se cambiarán por un nombre precedido del valor "1" cuando tenga que ser el gráfico verde o "2" cuando tenga que ser rojo, de la siguiente manera: "../imagenes/1barra1.gif" para el comienzo de la barra en verde, y "../imagenes/2barra1.gif" para cargar el gráfico en rojo. Así sólo necesito usar el valor de la variable "elec", seguida del mismo texto en cada caso.

Y creo que esto es todo, así que os lo dejo para que lo ojeéis y me deis una opinión. Muchas gracias de antemano.

[brown]

Plis, un poquito de ayuda, por favor...

[JavierB]

Hola brown

Para cambiar el color de la tabla, puedes usar:
<table id="titulo">
...
</table>
<script type="text/javascript">
document.getElementById('titulo').style.background Color=fondo;
</script>

También puedes hacer algo parecido con las imágenes, asignarles un id y cambiarlas con:

document.getElementById('tuId').src=variableImagen ;

Espero que te sirva. Saludos,

P.D. No se porqué rayos la palabra [i]backgroundColor[/b] ha quedado separada, pero debe ir junta.

[brown]

Bien, gracias por la solución. Ahora os planteo otras cuestión, a ver qué me podéis decir: resulta que, como ya he comentado, hay varias tablas que ir cambiando a lo largo del htm. He pensado que una buena forma de llevar esto a cabo sería un bucle con los id de cada tabla, llamándolos con un mismo nombre seguido de un numero, por ejemplo, "tabla01", la siguiente "tabla02", y así sucesivamente para después usar un bucle que coloque el color "fondo" en cada uno de ellos. Cómo veis esto? Alguien que me pueda escribir el código del bucle? Supongo que va con "if", igual que en VB, pero no sé usar bien la sintaxis. Muchas gracias.

[brown]

Ah, se me olvidaba... otro tema: tengo las imágenes en una carpeta hábilmente llamada "imagenes" ;) Pero al ir a colocar la imagen que quiero, JS no sabe la ruta completa que debe seguir. Claro, estoy hablando del archivo temporal de Dreamweaver, porque aún no he subido esto a Internet. Igual resulta que luego va sin problemas, pero, de no ser así, hay forma de indicar la ruta que debe seguir para cargar la imágen?

[brown]

He estado pensado que hay más formas de hacer esto, pero no encuentro el código adecuado para que funcione (recuerdo que no tengo ni idea de JS...). A ver si alguien me puede comentar algo, por favor. Gracias.

[tunait]

Tema trasladado al foro de javascript desde (x)html

[brown]

Gracias, tunait, porque la verdad es que ya se ha convertido en una cuestión de javascript.

[JavierB]

Hola brown

El bucle podría ser así:

Código:

for(i=0;i<20;i++) {
  j=i;
  if(j<10) j='0'+j;
  document.getElementById('tabla'+j).style.backgroundColor=fondo;
}

Saludos,

[brown]

OK. Algo así tenía yo, la verdad. He visto que funciona bien, aunque el bucle se pase de valor en cuanto al número real de tablas, pero, ¿no será un problema esto? Me refiero a que el bucle trabaja desde la tabla 01 hasta la tabla 50, pero sólo hay 12 en la web. ¿Importa? ¿Ralentiza el proceso? No sé, ¿no hay ninguna pega?
Por otra parte, ¿puedo cambiar también el color o grosor de la tabla mediante js? He probado con "bordercolor", pero no parece que sea, y no encuentro por ahí el código necesario. ¡Muchas gracias de nuevo!

[JavierB]

Hola de nuevo.

Si solo tienes 12 tablas y haces un bucle hasta 50, me imagino que dará error porque está tratando de "trabajar" con un objeto que no existe. Veamos si cambiando un poco el código...

Código:

num=document.getElementsByTagName('table').length;
for(i=0;i<num;i++) {

Así podrás añadir o quitar tablas sin modificar el script.

Sobre el borde, puedes hacerlo con Css:

Código:

<style type="text/css">
table {
  border-width: 3px;
  border-style: solid;
  border-color:red;
}
</style>

También se puede resumir poniendo border: 3px solid red;

Saludos,

[brown]

Lo cierto es que yo también pensaba que daría error, pero no es así, lo cual me alegra, pero pensaba que tal vez ralentizara la carga de la página o algo similar. En cualquier caso, con el nuevo código que has creado, ¿él sólo es capaz de saber cuál es el último valor del id "tabla01"? Me parece muy simple como para que analice los id de los elementos que se llamen así, pero vamos, que me lo creo, eh? ;)
Y sobre el borde y demás de la tabla, ¿ese código css se puede implementar seguido de lo que estamos trabajando en js? De hecho, ¿tiene que ir dentro de la etiqueta de js?

[JavierB]

Hola brown

La línea num=document.getElementsByTagName('table').length; averigua cuantas tablas hay en la página. Doy por supuesto que todas las tablas tienes id consecutivos y que no hay otras tablas aparte de las que quieres manipular. Si fuera así el código se complicaría un poco.

Saludos,

[brown]

Hmmm... Lo cierto es que hay 2 "tipos de tablas": Una contiene el título de la página en cuestión, mientras que las demás, que sí llevan id consecutivos, son las que albergan noticias y son idénticas. Mañana trataré de ponerme con ello a ver qué saco en limpio y os comento novedades. Muchas gracias una vez más.

[brown]

Veamos... Tengo el siguiente código de momento:

<script type="text/javascript">
//num=document.getElementsByTagName('table').length;
for (i=1;i<20;i++){
j=i;
if(j<10) j='0'+j;
document.getElementById('act'+j).style.backgroundC olor=fondotabla;
}
</script>

He suprimido como ves la parte en la que detecta cuántas tablas son por el asunto que te he comentado antes de que hay 2 tipos de tablas, si bien es cierto que las que quiero cambiar con el bucle llevan el mismo nombre "act01", "act02",...
El caso es que no sé bien cómo implementar el código css que me has puesto antes para cambiar el color del borde de la tabla, porque supongo que debería hacerlo dentro del código js, pero... Ais... esto de no tener ni idea de js... :(

[brown]

Chicos, no hay manera...
He probado en insertar la parte css en casi todos los sitios, menos en el correcto, por lo que veo. No consigo cambiar el color del borde.
Por otra parte, también en función del valor de una variable, se carga una imagen u otra en la otra tabla de la página (una que contiene un título), y el código que he empleado es "relativo" (creo que se dice así), cogiendo la imagen de: "../imagenes/talimagen.gif". En el momento de hacer la previsualización con DW, no va por este motivo, ya que el resto de imágenes tienen una ruta completa: "E:\......". Mi cuestión es si, una vez en la red sí que funcionará bien, o tengo que cambiarlo de alguna forma. Gracias y a ver si me solventáis el tema del color del borde, PLIS!

[brown]

Por dios, 1 día sin respuesta y mi mensaje está en el inframundo... En fin, a ver si alguien me puede ayudar y os dejo de dar la paliza. Gracias.

[tunait]

He leído rápido y por encima así que no sé si entendí muy bien, pero ahí te dejo algunos tips

Puedes crear el bucle con tantas vueltas como tablas y discriminar las que quieres usando la parte común de sus id
<script type="text/javascript">
num=document.getElementsByTagName('table').length;
for (i=1;i<num;i++){
if(document.getElementsByTagName('table')[i].id.indexOf('act') > -1){
document.getElementsByTagName('table')[i].style.backgroundColor=fondotabla;
}
}
</script>

Para el tema de los bordes con css debes especificar el color, tipo y grosor

Creo que sería mucho más práctico que reunieras todos los atributos que quieras cambiar en distintas clases y le cambies la clase directamente

.verde{
border: 1px solid #00ff00;
}

en el bucle de arriba sería ....

document.getElementsByTagName('table')[i].className='verde';

[brown]

Fenómeno! Esta tarde intento sacar un ratín para probar a ver. Muchas gracias, porque la parte de implementar el css en js no la tenía nada clara.

[brown]

Diosss... Ya he modificado el código para amoldarlo a lo que necesito, peeeero, la tabla se queda con un reborde blanco/gris por encima del cual se pone el que coloco yo con el css. Quiero decir que se aprecia el color blanquecino y como "1 pixel más afuera", el contorno rojo. Mmmmmm. Seguiré con ello, pero esto ya tiene buena pinta, sí señor.

[tunait]

Tienes asignadas a las tablas bordes desde atributo html?

<table border="1" ...

[brown]

Joder, qué dato tan revelador!
Perdón...
Bueno, pues con esto la cosa queda bastante bien, aunque con el bucle "detecta tablas" no me aclaro mucho, eh? De hecho, con él no consigo hacer funcionar el código. No sé exactamente porque estos días apenas tengo tiempo de copiar y pegar el código que me vais mandando, pero ya veré.
Sobre lo que comenté de las imágenes y su ruta, se sabe algo de si luego dará problemas una vez subido a la web? Bueno, cuando esté todo definitivamente colocado, os avisaré a ver qué os parece el resultado.