problemas con getElementById

Oskar
28 de Diciembre del 2005
Estoy haciendo un script de javascript para hacer categorias y subcategorias de manera infinita. Aqui esta el codigo comentado, si teneis alguna duda o no me he explicado bien decidmelo.

Muchas Gracias por cualquier ayuda!

<html>
<head>
<script language="javascript">
// CATEGORIAS
//Hay dos tipos de categorias, las categorias principales, y las
//subcategorias (que pueden ser subcategorias de las categorias principales
//o subcategorias de las subcategorias, de forma infinita)

//Variables:
//- num_categoria --> contador para añadir categorias principales
//- veces_cat=0 --> contador para que, cuando se hayan insertado
// previamente categorias, seleccione el maximo identificador
// encontrado en categorias solo una vez en lugar de cada vez
// que se llame a la funcion nuevacategoria y que inserte a
// partir de ese maximo identificador
//- subcat --> vector al que se le referencia a traves de un id de categoria,
// y que contendra el numero de subcategorias que tiene una categoria (o
// una subcategoria)

var num_categoria=1;
var veces_cat=0;
subcat=new Array();

function nuevacategoria(max){
// A esta funcion se le llama solamente en el momento de insertar nuevas categorias principales

//Recibe max, que es el maximo identificador de las categorias existentes
//en la base de datos. Sirve para que los nuevos identificadores continuen
//a partir del maximo, que es un numero entero.

//-----------------------------
//EN ESTE CASO MAX ES SIEMPRE 1
//-----------------------------

//Asigna el maximo al identificador de categoria (o numero de categoria)
//solamente si es la primera vez que se ha accedido a la funcion

veces_cat++;
if(veces_cat==1){
num_categoria=max;
}

// Se busca el objeto de la pagina que tenga como nombre "categorias", que es una capa
var categorias = document.getElementById("categorias");

//Se introduce codigo HTML en esa capa, que se trata de otra capa con el nombre igual al numero
//de categoria que se va a insertar en la bd
categorias.innerHTML+="<div id=categoria_"+num_categoria+">";
var categoria = document.getElementById("categoria_"+num_categoria+"");

// Dentro de esa nueva capa se introduce:
//- Campo de texto de formulario con el numero de la categoria como indetificador
//- Links a funciones de JavaScript para insertar nuevas subcategorias a la categoria actual,
//y para eliminarla (la categoria actual). A estas funciones se les pasa el numero de categoria actual
//- Otra nueva capa donde se insertaran las posibles subcategorias de la subcategoria actual
//con el identificador de la nueva categoria

categoria.innerHTML+="<br>";
categoria.innerHTML+=""+num_categoria+". <input type=text id="+num_categoria+" name="+num_categoria+">";
categoria.innerHTML+=" <a href='javascript:nuevasubcategoria("+num_categoria+",0)'>Añadir subcategoria</a>";
categoria.innerHTML+=" <a href='javascript:quitacategoria("+num_categoria+")'>Eliminar</a>";
categoria.innerHTML+="<div id=subcategoriasde_"+num_categoria+"></div>";

num_categoria++;
}


function nuevasubcategoria(id_cat,max){
// A esta funcion se le llama cada vez que se quiera insertar una nueva subcategoria

//Recibe el identificador o numero de la categoria a la que se le va a insertar una subcategoria
//y el numero de subcategorias que ya tenga (solo en el caso de estar editando, si la categoria
//principal es nueva, max vale 0

//Fuerzo al identificador recibido que sea de tipo texto
id_cat=""+id_cat

//for(i=0;i<=max;i++){
// Si en el vector subcat ya existe una referencia del identificador de categoria,
//incrementa el valor, en caso contrario, lo inicializa a 1

//Se repite tantas veces como valga max, para conseguir, en el caso de estar editando,
//que el identificador de la subcategoria comience despues del maximo valor de
//subcategoria que exista en la base de datos

if(subcat[id_cat]){
subcat[id_cat]++;
}else{
subcat[id_cat]=1;
}
//}

// num_subcategoria identificara a las nuevas subcategorias
//se crea a partir del identificador de la categoria superior,
//con el numero de subcategoria.

//----------------------------------------------------------------------------------------------------------------------------------------
//En un primer momento pense en utilizar un num_subcategoria de las formas 1, 2, 3... para categorias principales
//11, 12, 13, 14, ... para las subcategorias de "1",
//21, 22, 23, 24, ... para las subcategorias de "2",
//51, 52, 53, 54, ... para las subcategorias de "5" etc.

//111, 112, 113, 114, 115, ... para las subcategorias de "11",
//241, 242, 243, 244, 245, ... etc para las subcategorias de "24",
//y asi sucesivamente.

//El problema es que no se pueden poner mas de nueve subcategorias, ya que al procesar los identificadores en otra pagina
//cuento el numero de digitos, y al poner, por ejemplo, 10 subcategorias a la subcategoria "12", su num_categoria era "1210", y tal y
//como lo proceso en la otra pagina, eso significa que es la subcategoria numero "0" de la subcategoria "121"

//La solucion logica es poner un separador en medio de cada numero, yo me decante por el guion bajo.
//De esta forma quedaria...

//1, 2, 3...
//1_1, 1_2, 1_3, 1_4, ... para las subcategorias de "1",
//2_1, 2_2, 2_3, 2_4, ... para las subcategorias de "2",
//5_1, 5_2, 5_3, 5_4, ... para las subcategorias de "5" etc.

//1_1_1, 1_1_2, 1_1_3, 1_1_4, 1_1_5, ... para las subcategorias de "1_1",
//2_4_1, 2_4_2, 2_4_3, 2_4_4, 2_4_5, ... etc para las subcategorias de "2_4",
//y asi sucesivamente.
//---------------------------------------------------------------------------------------------------------------------------------------



//COMENTAR Y DESCOMENTAR ESTAS LINEAS DE ABAJO PARA PROBAR CON GUION O SIN GUION

//SIN GUIONES
num_subcategoria=id_cat+""+subcat[id_cat];

// Calculamos el numero de espacios que se deben colocar delante de la caja de texto
//En el caso de identificadores sin guiones, calculamos en numero de digitos de num_subcategoria
var n=num_subcategoria;
var num_espacios=0;
while(parseInt(n)!=0){
n=n/10;
num_espacios++;
}

/*

//CON GUIONES
num_subcategoria=id_cat+"_"+subcat[id_cat];

// Calculamos el numero de espacios que se deben colocar delante de la caja de texto
//En el caso de identificadores con guiones, buscamos el numero de guiones de num_subcategoria
var num_espacios=0;
for(i=0;i<num_subcategoria.length;i++){
if(num_subcategoria.charAt(i)=="_"){
num_espacios++;
}
}
*/


// Busca en la pagina el elemento que sea igual a "subcategoriade_" con el id de categoria padre
//para que inserte en ese objeto (que es una capa)
//----------PROBLEMA-------------------------------------------------
//-------------------------------------------------------------------
//Por algun motivo que desconozco, al utilizar el getElementById
//con id_cat contiendo caracteres que no sean numericos, no funciona
//-------------------------------------------------------------------
//----------PROBLEMA-------------------------------------------------
var subcategoriasde = document.getElementById("subcategoriasde_"+id_cat);

// Insertamos una nueva capa para identificar la nueva subcategoria
subcategoriasde.innerHTML+="<div id=subcategoria_"+num_subcategoria+">";


var subcategoria = document.getElementById("subcategoria_"+num_subcategoria);

// Insertamos tantas tabulaciones como guiones existan en el identificador
//de subcategoria para desplazar la caja de texto

for(i=1;i<=num_espacios;i++){
subcategoria.innerHTML+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}

// Dentro de la nueva capa de subcategoria se introduce:
//- Campo de texto de formulario con el numero de la subcategoria
//- Links a funciones de JavaScript para insertar nuevas subcategorias a la subcategoria actual,
//y para eliminarla (la subcategoria actual). A estas funciones se les pasa el numero de subcategoria actual
//- Una nueva capa donde se insertaran las posibles subcategorias de la subcategoria actual
//con el identificador de la nueva subcategoria

subcategoria.innerHTML+=""+subcat[id_cat]+". <input type=text id="+num_subcategoria+" name="+num_subcategoria+"> ";
subcategoria.innerHTML+=" <a href='javascript:nuevasubcategoria("+num_subcategoria+",0)'>Añadir subcategoria</a>";
subcategoria.innerHTML+=" <a href='javascript:quitasubcategoria("+num_subcategoria+")'>Eliminar</a>";
subcategoria.innerHTML+="<div id=subcategoriasde_"+num_subcategoria+"></div>";



}

function quitasubcategoria(id_cat) {
// Busca el objeto que tiene el numero de subcategoria especificado y borra el interior
var d = document.getElementById("subcategoria_"+id_cat);
d.innerHTML = "";
}

function quitacategoria(id_cat) {
// Busca el objeto que tiene el numero de categoria especificado y borra el interior
var d = document.getElementById("categoria_"+id_cat);
d.innerHTML = "";
}

</script>

<!-- Parte principal: cuerpo de los formularios -->

<form name="form" action="run.php?op='nueva_categoria'" method="post" enctype="multipart/form-data">

<div id="categorias" name="categorias">
<a href="javascript:nuevacategoria(1)">A&ntilde;adir una categoria</a>
</div>

<br /><br /><br />

<input type="submit" name="submit" value="Aceptar" class="area">

</form>
</body>
</html>

Oskar
28 de Diciembre del 2005
Gracias por las respuestas.

He encontrado la solucion al fallo... Como no, tenia que ser algo absurdamente sencillo...

No era un problema con el getElementById, si no la forma en que llamaba a las funciones, en resumen, ¡un problema de comillas! jeje, intetaba enviar a la funcion un parametro de tipo texto, sin ponerle comillas, asi que ¡error al canto!

Si me lo pedis pondre la solucion entera, aunque es tan sencillo que me basta con poner una linea...

En la funcion nuevasubcategoria, colocar " donde se indica:
[CODE]subcategoria.innerHTML+=" <a href='javascript:nuevasubcategoria(""+num_subcategoria+"",0)'>Añadir subcategoria</a>";
subcategoria.innerHTML+=" <a href='javascript:quitasubcategoria(""+num_subcategoria+"")'>Eliminar</a>";[/CODE]