Calculadora en HTML (Modelo A)

Pantalla de Calculadora

---

FUNCIONAMIENTO

El mecanismo de activación de la calculadora esta basado en un botón que activa una función por medio del evento  <button onclick="Alfonso()">=</button>

Cuando se pulsa el signo de igual "=" ubicado en la parte inferior del teclado virtual se activa la función abajo codificada:

 function Alfonso() { 
var resultado= pantalla.textContent
document.getElementById("pantalla").innerHTML =eval(resultado);  }

La función extrae la operación matemática que se encuentra como texto dentro de la etiqueta de división identificada como pantalla por medio del atributo id="pantalla" tal como se muestra:

<div id="pantalla"></div>  

Luego se evalúa el texto contenido dentro de la variable resultado por medio de la siguiente función:  eval(resultado); para luego sustituir la expresión matemática por el resultado de la evaluación de dicha expresión, introduciendo de nuevo la información en la etiqueta con el identificador pantalla, por medio de la siguiente expresión:

 document.getElementById("pantalla").innerHTML =eval(resultado)

Falta mejorar la función para cuando se pulsa la tecla igual "=" sin tener nada en la pantalla, por lo que el resultado mostrado en ese caso será:  

  Undefined

---

Copia, pega y lánza la siguiente codificación en tu navegador de preferencia.

<!--Calculadora----------------------------------------------->

<div style="text-align: center;">Pantalla de Calculadora

<br /><div id="pantalla"></div><br />

</div>

<div><br /><br /><br /></div>

<table border="1" cellpadding="0" cellspacing="0">

  <tbody face="georgia" size="1" style="height: 5pt; text-align: center;" valign="top">

  <tr>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '7'; ">7</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '8'; ">8</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '9'; ">9</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '+'; ">+</button></td>

  </tr>

  <tr>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '4'; ">4</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '5'; ">5</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '6'; ">6</button></td>

   <td><button onclick="document.getElementById('pantalla').innerHTML += '-'; ">-</button></td>

  </tr>

  <tr>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '1'; ">1</button></td>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '2'; ">2</button></td>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '3'; ">3</button></td>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '*'; ">*</button></td>

  </tr>

  <tr>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '0'; ">0</button></td>

  <td><button onclick="document.getElementById('pantalla').innerHTML += '.'; ">.</button></td>

  <td><button onclick="Alfonso()">=</button></td><td>

  <button onclick="document.getElementById('pantalla').innerHTML += '/'; ">/</button></td>

  </tr>

  </tbody>

</table>

<!----------------------------boton clear -------------------->

<div><br /></div>

<button onclick="document.getElementById('pantalla').innerHTML = '';">AC</button>

<div><br /></div>

<hr background-color:="black" color="Blue" size="1px" />

<div><br /></div>

<!-------------------------java script---------------------------->

<script>

function Alfonso() {

var resultado= pantalla.textContent

document.getElementById("pantalla").innerHTML =eval(resultado);  }

</script>

---

Cuidado!,  tomar en cuenta las comillas sencillas dentro de las estructuras utilizadas en el atributo  .onclick="    " es muy importante de lo contrario no funcionará.