Buenas tardes,, gracias.. yo lo hice, pero lo modifique a mi gusto porque no tenia la intención de subirlo, plasme de manera independiente el html, css y javascript. Aparte de eso que cambie la funcion: getElementByClassName por la funcion: getElementById, con intención de probar de diferentes manera con el mismo resultado, pero lo que pedia el ejercicio como tal, lo de cambiar el swicth por condiciones if y else si lo hice tal cual como lo pedía el ejercicio. Vuelvo y repito, modifique a mi gusto porque no tenia la intención de subirlo.
1) Modifica el código del ejemplo de la calculadora javascript para que en lugar del condicional switch
uses el condicional if (con if else ó if else if cuando sea necesario).
--------------------------------------------------------------------
HTML
<!DOCTYPE html>
<html style="border:none">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calculadora.css">
<script type="text/javascript" src="calculadora.js"></script>
</head>
<body style="border:none">
<header> <!-- Cabezera -->
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</header>
<div id="calculadora"> <!-- contenedor -->
<!-- pantalla y la tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div id="pantallota" class="pantalla"> </div> <!-- Se deja un espacio dentro de la etiqueta para poder agarrarlo con el nodeValue -->
</div>
<div class="teclas">
<!-- Operadores y otras letras -->
<span onclick="pulsada('7')">7</span>
<span onclick="pulsada('8')">8</span>
<span onclick="pulsada('9')">9</span>
<span onclick="pulsada('+')" class="operador">+</span>
<span onclick="pulsada('4')">4</span>
<span onclick="pulsada('5')">5</span>
<span onclick="pulsada('6')">6</span>
<span onclick="pulsada('-')" class="operador">-</span>
<span onclick="pulsada('1')">1</span>
<span onclick="pulsada('2')">2</span>
<span onclick="pulsada('3')">3</span>
<span onclick="pulsada('/')" class="operador">÷</span>
<span onclick="pulsada('0')">0</span>
<span onclick="pulsada('.')">.</span>
<span onclick="pulsada('=')" class="igual">=</span>
<span onclick="pulsada('*')" class="operador">x</span>
<span id="probandoAndo" onclick="miPrueba()">probar</span>
</div>
</div>
</body>
</html>-------------------------------------------------------------------------
CSS
body{
font-family: sans-serif;
text-align: center;
}
#calculadora{
font: bold 14px Arial, sans-serif;
background-color: #9DD2EA;
margin: 0 auto;
padding: 20px 20px 9px;
width: 285px;
border-radius: 3px;
/*height: auto;*/
}
.parteSuperior, .teclas{
overflow: hidden;
}
div.parteSuperior div.pantalla{
background-color: rgba(0, 0, 0, 0.2);
color: #FFF;
float: right;
width: 180px;
height: 40px;
font-size: 17px;
border-radius: 3px;
padding: 0 10px;
text-align: right;
letter-spacing: 1px;/*espaciado entre caractere*/
line-height: 40px;
}
.parteSuperior span.limpiar, .teclas span{
background-color: #FFFFFF;
color: #888888;
cursor: pointer;
float: left;
border-radius: 3px;
height: 36px;
width: 66px;
margin: 0 7px 11px 0;
line-height: 36px;
text-align: center;
transition: all 1s ease 0s;
}
.parteSuperior span.limpiar{
background-color: #FF7C87;
}
.teclas span.operador{
margin-right: 0;
background-color: #FFDAB9;
}
.teclas span.igual{
background-color: #F1FF92;
color: #888E5F;
}
.parteSuperior span.limpiar:hover, .teclas span:hover{
background-color: #9C89F6;
color: #FFFFFF;
}
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 325px;
margin: 0 auto;
border-radius: 3px;
}
header h2, header h3{
margin: 0;
padding: 5px;
}
header h3{
background-color: #E59DEA;
}
header h2{
background-color: #FFBBF6;
}
.teclas span#probandoAndo{
width: 100%;
}---------------------------------------------------------------------------
javascript
var listaNodoPantalla;
function pulsada(tecla) {
listaNodoPantalla = document.getElementsByClassName("pantalla");
var nodoTextoPantalla = listaNodoPantalla[0].childNodes[0];//Segunda opcion: listaNodoPantalla[0].firstChild
switch(tecla){
case "C":
nodoTextoPantalla.nodeValue = "";
break;
case "=":
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
break;
default:
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
}
}
Tema: Función eval JavaScript implementar calculadora getElementsByClassname CU01133E# (Leído 5356 veces)
RSS -
WAP2