onclick no ejecuta la función en la misma página

src · #1 (**permalink**) 05/10/2013, 06:23

Tengo un menú de opciones con íconos y cada uno de ellos lleva a presentar un texto en especial; al cargar la página inicial, se ejecuta la misma función que mando ejecutar con onclick y lo hace justo como espero que suceda (sin presentar una nueva página y con el estilo CSS); pero al tomar alguna de las opciones me da el texto en una nueva página (sin abrir pestaña ni ventana nuevas) y no respeta los estilos CSS que utilizo.
Tomé las partes importantes del código y aquí lo dejo, ojalá alguien me pueda ayudar. (Espero haberme explicado bien).

Código HTML:

Ver original<html>
<head>
<script src="include/inc_textos.js" type="text/javascript"></script>
<script>
 
function cambia_datos(cual) {
    switch(cual){
        case 1:
            document.write("<div id='caja_inicio'>");
            document.write(texto_inicio());
            document.write("</div>");
            break;
        case 2:
            document.write("<div id='caja_servicios'>");
            document.write(texto_servicios());
            document.write("</div>");
            break;
            .
            .
    }
}
</script>
</head>
<body>
    <img id="iconos" src="images/iconos/inicio.png" onclick="cambia_datos(1)"/>
    <img id="iconos" src="images/iconos/servs.png" onclick="cambia_datos(2)"/>
    .
    .
    .
 
    <script type="text/javascript">
        cambia_datos(1);
    </script>
 
</body>
</html>
 
 
// FUNCIONES DENTRO DEL ARCHIVO INC_TEXTOS.JS
 
function texto_inicio(){
var texto =  "<p id='titulo'> BIENVENIDOS </p> ";
    texto += "<p id='texto'> Somos una empresa . . .  ";
    texto += "personal y turístico. ";
    return(texto);
}
 
function texto_servicios(){
var texto =  "<p id='titulo'> Nuestros Servicios </p>";
    texto += "<p id='texto'> Cuando necesitas . . . ";
    texto += "en una empresa.</br>";
    return(texto);
}

PHPeros · #2 (**permalink**) 05/10/2013, 06:27

Recuerda que el método write() sobreescribe todo el body!!
Para que no haga este efecto deberías crear un div aparte y acceder a su innerHTML (contenido entre tags), de esta forma permanecerá ahí y podrás modificarlo cuando quieras usando el operador de concatenación: +=

Saludos

src · #3 (**permalink**) 05/10/2013, 07:05

Gracias PHPeros por tomarte el tiempo para ayudarme, pero la verdad es que soy nuevo en javascript, ¿Podrías por favor darme un breve ejemplo?

PHPeros · #4 (**permalink**) 05/10/2013, 07:31

Te paso una demo sencillita para que vayas aprendiendo, porque son varias cosas importantes que debes analizar antes de ponerte manos a la obra.

http://www.w3schools.com/jsref/tryit...yjsref_onclick

Saludos

src · #5 (**permalink**) 05/10/2013, 11:16

Gracias PHPero, con eso podré guiarme.