0

Estaba siguiendo un tutorial para hacer una calculadora en HTML y javascript y no sé en qué me equivoqué ya que seguí todos los pasos del video.

este es el código de HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <title> Calculadora Basica en javascript </title>
 <script type="text/javascript" src="script.js"></script>

<style>

input[type=button],input[type="text"]{
 width: 100%;
 height: 100%;
 font-size: 30px; 
}
table,form{
    width: 500px;
    height: 400px;
    margin: 0 auto;
}

</style> 



</head>

<body>
<form name="Fo">
<table>
 <tr>
    <td colspan="5"><input type="text" name="valores" id="valores" onkeypress="return"></td>
 </tr>
<tr>
      <td><input type="button" value="7" onClick="retornar(value)"></td>
      <td><input type="button" value="8" onClick="retornar(value)"></td>
      <td><input type="button" value="9" onClick="retornar(value)"></td>
      <td><input type="button" value="+"></td>
      <td><input type="button" value="-"></td>
</tr>

<tr>
      <td><input type="button" value="4" onClick="retornar(value)"></td>
      <td><input type="button" value="5" onClick="retornar(value)"></td>
      <td><input type="button" value="6" onClick="retornar(value)"></td>
      <td><input type="button" value="*"></td>
      <td><input type="button" value="/"></td>

    <tr>
      <td><input type="button" value="1" onClick="retornar(value)"></td>
      <td><input type="button" value="2" onClick="retornar(value)"></td>
      <td><input type="button" value="3" onClick="retornar(value)"></td>
      <td><input type="button" value="<-"></td>
      <td><input type="button" value="C"></td>
    </tr>
</tr>
<tr>
      <td colspan="2"><input type="button" value="0" onClick="retornar(value)"></td>
      <td></td>
      <td colspan="2"><input type="button" value="="></td>
    </tr>


</table>    


</form> 
</body>

este es el de JavaScript:

//para validar que solo sean numeros

function solonumeros(e){


key=e.keyCode || e.which;

teclado=String.fromCharCode(key);

numeros="0123456789";

especiales="8-37-39-46";

tecla_especial=false;

for (var i in especiales){
if (key==especiales[i]) {
    tecla_especial=true;
}
}

if (numeros.indexOf(teclado)==-1) {
return false;
}
}

 //para asignar cada valor
 function retornar(num){
   var anterior=document.fo.valores.value;
   document.getElementById("valores").value=anterior+num;

 }


 //para eliminar el ultimo caracter


 // para eliminar todo


 //para realizar todas las operaciones


 //para validar lo signos
1
  • Hola Juan Diego, te damos la bienvenida a Stack Overflow en español (completa el recorrido de bienvenida para aprender más sobre el sitio y así ganar tu primera medalla). Aunque esta pregunta es interesante y se ajusta bien a la temática del sitio, deberías editarla para añadir más información: ¿qué es lo que no funciona? ¿Qué tutorial estás siguiendo? ¿Recibes algún error en la consola? Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y recomendaciones de mejora. Un saludo.
    – Alvaro Montoro
    Commented el 20 may. 2018 a las 7:58

1 respuesta 1

0

He modificado la función retornar para que te funcione lo que tienes ahora mismo. El problema es que estabas usando document.fo.valores.value, que no se muy bien cual era tu intención, pero añadiendo esta modificación ya deberían aparecerte los números en pantalla.

A demás, también estabas cerrando mal las etiquetas <tr> de la tabla, y te faltó cerrar la etiqueta <html>.

//para validar que solo sean numeros

function solonumeros(e){

  key=e.keyCode || e.which;

  teclado=String.fromCharCode(key);

  numeros="0123456789";

  especiales="8-37-39-46";

  tecla_especial=false;

  for (var i in especiales){
    if (key==especiales[i]) {
      tecla_especial=true;
    }
  }

  if (numeros.indexOf(teclado)==-1) {
    return false;
  }
}

 //para asignar cada valor
 function retornar(num){
   //var anterior=document.fo.valores.value;
   var valores = document.getElementById('valores');
   valores.value = valores.value + num;
 }


 //para eliminar el ultimo caracter
 

 // para eliminar todo


 //para realizar todas las operaciones


 //para validar lo signos
input[type=button],input[type="text"]{
 width: 100%;
 height: 100%;
 font-size: 30px; 
}
table,form{
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> Calculadora Basica en javascript </title>
</head>

<body>
  <form name="Fo">
    <table>
      <tr>
        <td colspan="5"><input type="text" name="valores" id="valores" onkeypress="return"></td>
      </tr>
      <tr>
        <td><input type="button" value="7" onClick="retornar(value)"></td>
        <td><input type="button" value="8" onClick="retornar(value)"></td>
        <td><input type="button" value="9" onClick="retornar(value)"></td>
        <td><input type="button" value="+"></td>
        <td><input type="button" value="-"></td>
      </tr>
      <tr>
        <td><input type="button" value="4" onClick="retornar(value)"></td>
        <td><input type="button" value="5" onClick="retornar(value)"></td>
        <td><input type="button" value="6" onClick="retornar(value)"></td>
        <td><input type="button" value="*"></td>
        <td><input type="button" value="/"></td>
      </tr>
      <tr>
        <td><input type="button" value="1" onClick="retornar(value)"></td>
        <td><input type="button" value="2" onClick="retornar(value)"></td>
        <td><input type="button" value="3" onClick="retornar(value)"></td>
        <td><input type="button" value="<-"></td>
        <td><input type="button" value="C"></td>
      </tr>
      <tr>
        <td colspan="2"><input type="button" value="0" onClick="retornar(value)"></td>
        <td></td>
        <td colspan="2"><input type="button" value="="></td>
      </tr>
    </table>    
  </form> 
</body>
</html>

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.