Foros Club Delphi

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)
-   HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)
-   -   Migrar código javascript de html a .js (https://www.clubdelphi.com/foros/showthread.php?t=93604)

lordballiwns 27-11-2018 05:23:23

Migrar código javascript de html a .js
 
Antes que nada soy nuevo en este foro... Y pido ayuda para lo siguiente
Hace poco copie un código lo cual me permite esconder texto y mostrarlos según sean requeridos.
Sin embargo me encontré qué el código javascript se escribe dentro de html lo cual por organización y optimizacion me gusta tenerlo en un documento js. Pero al pasarlo (cabe decir que de javascript no se nada) las acciones no se realizan el codigo es el siguiente qué agrego o que quito para que funcione. De ante mano gracias por leer el texto anterior y de su ayuda.

Código:


<script languaje="Javascript">       
<!--     
document.write('<style type="text/css">div.cp_oculta{display: none;}</style>');     

function MostrarOcultar(capa,enlace)      {     
  if (document.getElementById)      {     
    var aux = document.getElementById(capa).style;     
    aux.display = aux.display? "":"block";     
  }     
}         
//-->     
</script>


bucanero 27-11-2018 19:22:40

hola lordballiwns

el código que has puesto tiene dos partes,
- en la primera agregas una declaración de estilo al documento HTML, donde se declara las capas div de clase cp_oculta como no visibles, esto es mas bien parte del CSS y se puede poner en un fichero a parte.
Código:

document.write('<style type="text/css">div.cp_oculta{display: none;}</style>');
- y en la segunda parte tienes declarada una función que obtiene un elemento tomandolo por su nombre y cambia su propiedad visible. Esta es la parte que si que puedes extraer a un fichero JS
La forma de separar el javascript del HTML es agregar un nuevo fichero con extension js (yo lo he llamado miscript.js) y grabarlo en la misma carpeta o subcarpeta del HTML con el siguiente contenido:
Código:

function MostrarOcultar(capa)      {     
  if (document.getElementById)      {     
    var aux = document.getElementById(capa).style;     
    aux.display = aux.display ? "":"block";     
  }     
}

y ya en el HTML (con alguna pequeña modificación respecto al tuyo) puedes probarlo de esta manera:
Código:

<!-- ------------------------------------------------------
  esta definición en tu caso era el javascript el que
  la insertaba en el documento pero por tratarse mas bien
  de CSS he preferido sacarla fuera, e incluso se puede
  poner en un fichero externo de CSS
  ------------------------------------------------------ -->
<style>
  div.cp_oculta{
    display: none;
  }
</style>
<!-- ------------------------------------------------------ -->

<div id="algo" class="cp_oculta"> algun texto</div>
<button onclick="MostrarOcultar('algo')">Mostrar/Ocultar</button>

<!-- aqui lee el fichero de js -->
<script src="miscript.js"></script>

Un saludo

lordballiwns 27-11-2018 23:26:48

Quice poner el codigo pero no me permitió pero subiré el archivo para que lo vean





CSS http interlan ml / alpha / CSS / estilo.css
HTML http interlan ml / alpha / index.html



Gracias por el aporte. Y pues en este momento estará subiendo el archivo

Teto10 02-09-2019 20:30:12

Hola amigo, no has subido los archivos para poder apreciarlos bien y asi ayudarte.


La franja horaria es GMT +2. Ahora son las 16:48:11.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Traducción al castellano por el equipo de moderadores del Club Delphi