0

como le podria hacer para que cuando de clic en el botón de Presiona para ver los meses, el resultado lo muestre en la misma pantalla y no que abra una nueva y pierda el formato?

<html>
<head>
<title>Meses del año</title>
<meta charset="utf-8">
<style type="text/css">
body
{
 background-color:#FF0000; 
 }
 </style>
 </head>
 <body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <font color="#030303" face="georgia" size="5"> 
 <center>
 <TABLE BORDER=3 width="1000" height="50">
 <TR><TD>
 <font face="georgia" size="30">
 <MARQUEE SCROLLAMOUNT=10 BEHAVIOR="alternate"><b>Meses del año</b></MARQUEE>
 </font>
 </TD></TR>
 </TABLE>
 <script type="text/javascript">
 function Mostrarmeses() 
 {
  var meses = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
  var order = ['primer', 'segundo', 'tercero', 'cuarto', 'quinto', 'sexto', 'septimo', 'octavo', 'noveno', 'decimo', 'decimoprimero', 'decimosegundo'];
  document.write('<br>'); 
  for (var i = 0; i<12; i++) 
  {
   document.write('<br>'); 
   document.write("El " + order[i] +" mes es: "+meses[i]);
   document.write('<br>'); 
  }
 }
</script>
</script>
<button type='button' onclick='Mostrarmeses()'>Presiona para ver los meses</button><br/>
</center>
</font>
</body>
</html>

6
  • jsfiddle.net/9vvsxavu
    – Hackerman
    Commented el 16 oct. 2017 a las 20:42
  • Y sobre todo no usar document.write...es maligno
    – Hackerman
    Commented el 16 oct. 2017 a las 20:43
  • Con razon no funcionaba jeje, ok enterado, perfecto, muchas gracias. Commented el 16 oct. 2017 a las 21:16
  • @Hackerman pon eso en una respuesta (con algo de explicación). Los comentarios no se indexan y no aparecen en las búsquedas.
    – Alvaro Montoro
    Commented el 17 oct. 2017 a las 13:39
  • Estaba demasiado facil como para una respuesta completa...para mi como comentario basta.
    – Hackerman
    Commented el 17 oct. 2017 a las 13:42

2 respuestas 2

1

Como te ha comentado Galbi, la función write() hace que sobreescribas el contenido del documento, realmente no estas siendo dirigido a otra página si no que tu documento se borra y se actualiza con la nueva información.

Además de eso, me gustaría puntualizar que haces uso de jQuery sin utilizarlo.

$(document).ready(function(){
  function Mostrarmeses() 
   {
    var meses = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
    var order = ['primer', 'segundo', 'tercero', 'cuarto', 'quinto', 'sexto', 'septimo', 'octavo', 'noveno', 'decimo', 'decimoprimero', 'decimosegundo'];
    let e_HTML = '';
    for (var i = 0; i<12; i++) 
    {
     e_HTML += `
       <br>
       El ${order[i]} mes es: ${meses[i]}
       <br>
     `;
    }
    
    return e_HTML;
   }
   
   $('#boton').click(function(){
     let e_HTML = Mostrarmeses();
     $('#contenido').append(e_HTML);
   });
 
 });
<html>
<head>
<title>Meses del año</title>
<meta charset="utf-8">
<style type="text/css">
body
{
 background-color:#FF0000; 
 }
 </style>
 </head>
 <body>

 <font color="#030303" face="georgia" size="5"> 
 <center>
 <TABLE BORDER=3 width="1000" height="50">
 <TR><TD>
 <font face="georgia" size="30">
 <MARQUEE SCROLLAMOUNT=10 BEHAVIOR="alternate"><b>Meses del año</b></MARQUEE>
 </font>
 </TD></TR>
 </TABLE>
<button type='button' id="boton">Presiona para ver los meses</button><br/>
<div id="contenido"></div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</center>
</font>
</body>
</html>

1
  • Con razon no funcionaba jeje, ok enterado, perfecto, muchas gracias, ya hice la prueba y si funciona mil gracias. Commented el 16 oct. 2017 a las 21:16
0

Tu problema está en cómo escribes los meses en la página. Al hacer document.write() lo que haces es sobreescribir todo el contenido del document, es decir, estas sobreescribiendo el html de la propia página.

Lo que puedes hacer es coger un elemento (por ejemplo un div) sobre el que escribir los meses, y ya que usas jQuery hacer algo como: $('#id_contenedor').html(Aquí va tu nuevo código html); de esta forma solo insertarías el código html dentro del contenedor seleccionado y no sobreescribirias toda la pagina.

1
  • Con razon no funcionaba jeje, ok enterado, perfecto, muchas gracias. Commented el 16 oct. 2017 a las 21:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.