Event onclick javascript button

Question

Event onclick javascript button

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

How would you do it so that when you click on the Press button to see the months, the result shows it on the same screen and not that you open a new one and lose the format?

<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>

javascript

asked by Graffters Skates 16.10.2017 в 22:24

source

2 answers

Avoid getting out 0.00 in SQL server query help codification zenith polar in c

score 1 · Answer 1

As Galbi has told you, the write () function causes you to overwrite the content of the document, you are not really being directed to another page, but your document is deleted and updated with the new information.

Besides that, I would like to point out that you use jQuery without using it.

$(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>

score 0 · Answer 2

Your problem is how you write the months on the page. When doing document.write() what you do is overwrite all the content of the document, that is, you are overwriting the html of the page itself.

What you can do is take an element (for example a div) on which to write the months, and since you use jQuery to do something like: $('#id_contenedor').html(Aquí va tu nuevo código html); in this way you would only insert the html code inside the selected container and you would not overwrite the whole page.