Boa noite
Tenhao dois problemas
A tela da minha calculadora é criada com uma div, toda vez que eu insiro um valor nela através da propriedade innerHTML o seu tamanho é alterado.
Queria saber se é possível inserir um valor nessa div e ela permanecer do mesmo tamanho por exemplo funcionar como uma tela de calculadora mesmo.
E o outro problema é saber como remover um valor inserido numa div através da propriedade innerHTML.
Meu código
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<meta charset="utf-8">
<meta name="author" content="Robson da Silva">
<meta name="keywords" content="miniprojeto,treino,javascript">
<meta name="descriptions" content="Calculadora usando javascript">
<style>
h1{
text-align:center;
text-decoration:underline;
}
input[type=button]{
padding:10px;
padding-right:15px;
}
input[type=button]:hover{
cursor:pointer;
border-radius:4px;
background-color:#B0C4DE;
}
#tela{
padding:20px;
padding-left:200px;
border:1px solid;
position:absolute;
bottom:350px;
left:130px;
background-color:#7FFFD4;
font-family:monospace;
}
#calculadora{
padding-left:490px;
pading-top:90px;
padding-bottom:100px;
padding-left:160px;
border:solid 1px;
border-radius:8px;
background-color:black;
margin-left:400px;
margin-right:480px;
position:relative;
}
#igual{
padding-left:50px;
}
</style>
</head>
<body onkeydown="apagar(event)">
<h1>Calculadora</h1>
<form id="calculadora">
<div type="text" id="tela" onmouseover="InseriViva()" onmouseout="RemovaViva()"></div><br><br><br><br><br><br><br><br>
<input type="button" name="bt1" value="1" onclick="one()">
<input type="button" name="bt2" value="2" onclick="two()">
<input type="button" name="bt3" value="3" onclick="three()">
<input type="button" name="bt4" value="4" onclick="four()"><br><br>
<input type="button" name="bt5" value="5" onclick="five()">
<input type="button" name="bt6" value="6" onclick="six()">
<input type="button" name="bt7" value="7" onclick="seven()">
<input type="button" name="bt8" value="8" onclick="eight()"><br><br>
<input type="button" name="bt9" value="9" onclick="nine()">
<input type="button" name="bt0" value="0" onclick="zero()">
<input type="button" name="btsoma" value="+" onclick="soma()">
<input type="button" name="btsub" value="-" onclick="subtracao()"><br><br>
<input type="button" name="btmult" value="x" onclick="multiplicacao()">
<input type="button" name="btdiv" value="/" onclick="divisao()">
<input type="button" name="btigual" value="=" id="igual" onclick="calculo()">
</form>
<button onclick="testa()">dados</button><br><br>
<button onclick="numero()">Numero</button><br><br>
<button onclick="operation()">Operacao</button><br><br>
<button onclick="limpar()">Limpar</button>
<button onclick="teste()">teste</button>
<script>
var dados = [];//Vetor que receberá os algarismos para a operação em forma de string
var operacao = [];//Vetor que receberá a quantidade de operações existentes no cálculo
var Numero = [""];//Vetor que recebera os números que foram armazenados no vetor dados.
var ResulFinal;// Recebe o valor final do vetor Numero.
var limpa = 0;
var control = 0;
//Função que insere o número um na tela e no vetor dados.
function one(){
var um = "1";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += um;
dados.push(um);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += um;
dados.push(um);
control = 1;
}
Pisca();
}
//Função que insere o número dois na tela e no vetor dados.
function two(){
var dois = "2";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += dois;
dados.push(dois);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += dois;
dados.push(dois);
control = 1;
}
Pisca();
}
//Função que insere o número três na tela e no vetor dados.
function three(){
var tres = "3";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += tres;
dados.push(tres);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += tres;
dados.push(tres);
control = 1;
}
Pisca();
}
//Função que insere o número quatro na tela e no vetor dados.
function four(){
var quatro = "4";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += quatro;
dados.push(quatro);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += quatro;
dados.push(quatro);
control = 1;
}
Pisca();
}
//Função que insere o número cinco na tela e no vetor dados.
function five(){
var cinco = "5";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += cinco;
dados.push(cinco);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += cinco;
dados.push(cinco);
control = 1;
}
Pisca();
}
//Função que insere o número seis na tela e no vetor dados.
function six(){
var seis = "6";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += seis;
dados.push(seis);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += seis;
dados.push(seis);
control = 1;
}
Pisca();
}
//Função que insere o número sete na tela e no vetor dados.
function seven(){
var sete = "7";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += sete;
dados.push(sete);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += sete;
dados.push(sete);
control = 1;
}
Pisca();
}
//Função que insere o número oito na tela e no vetor dados.
function eight(){
var oito = "8";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += oito;
dados.push(oito);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += oito;
dados.push(oito);
control = 1;
}
Pisca();
}
//Função que insere o número nove na tela e no vetor dados.
function nine(){
var nove = "9";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += nove;
dados.push(nove);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += nove;
dados.push(nove);
control = 1;
}
Pisca();
}
//Função que insere o número zero na tela e no vetor dados.
function zero(){
var zero = "0";
if(limpa>0){
document.getElementById("tela").innerHTML ="";
document.getElementById("tela").innerHTML += zero;
dados.push(zero);
limpa=0;
control = 1;
}
else{
document.getElementById("tela").innerHTML += zero;
dados.push(zero);
control = 1;
}
Pisca();
}
//Função que insere o símbolo da operação de adição na tela e no vetor dados.
function soma(){
var soma = "+";
if (control>0){
if(limpa>0){
Numero[0] = ResulFinal;
document.getElementById("tela").innerHTML += soma;
dados.push(soma);
limpa=0;
control=0;
}
else{
document.getElementById("tela").innerHTML += soma;
dados.push(soma);
limpa=0;
control=0;
}
}
Pisca();
}
//Função que insere o símbolo da operação de subtração na tela e no vetor dados.
function subtracao(){
var sub = "-";
if (control>0){
if(limpa>0){
Numero[0] = ResulFinal;
document.getElementById("tela").innerHTML += sub;
dados.push(sub);
limpa=0;
control=0;
}
else{
document.getElementById("tela").innerHTML += sub;
dados.push(sub);
limpa=0;
control=0;
}
}
Pisca();
}
//Função que insere o símbolo da operação de multiplicação na tela e no vetor dados.
function multiplicacao(){
var mult = "x";
if (control>0){
if(limpa>0){
Numero[0] = ResulFinal;
document.getElementById("tela").innerHTML += mult;
dados.push(mult);
limpa=0;
control=0;
}
else{
document.getElementById("tela").innerHTML += mult;
dados.push(mult);
limpa=0;
control=0;
}
}
Pisca();
}
//Função que insere o símbolo da operação de divisão na tela e no vetor dados.
function divisao(){
var div = "/";
if (control>0){
if(limpa>0){
Numero[0] = ResulFinal;
document.getElementById("tela").innerHTML += div;
dados.push(div);
limpa=0;
control=0;
}
else{
document.getElementById("tela").innerHTML += div;
dados.push(div);
limpa=0;
control=0;
}
}
Pisca();
}
//Função que serve para limpar o vetor dados.
function LimpaDados(){
var tam = dados.length;
for(var o=0;o<=tam;o++){
dados.shift();
}
}
//Função que serve para limpar o vetor Número.
function LimpaNumero(){
var tam = Numero.length;
for(var o=0;o<=tam;o++){
Numero.shift();
}
Numero = [""];
}
//Função que serve para limpar o vetor operacao.
function LimpaOperacao(){
var tam = operacao.length;
for(var o=0;o<=tam;o++){
operacao.shift();
}
}
//Função responsavél pelo pisco da borda da tela da calculadora.
function Pisca(){
var borda = document.getElementById("tela");
borda.style.borderColor = "#0000ff";
setTimeout(RemovePisca,1000/3);
}
//Função responsavél pelo pisco da borda da tela da calculadora.
function RemovePisca(){
var borda = document.getElementById("tela");
borda.style.borderColor = "#000000";
}
//Função responsavél pelo mensagem I'm alive quando o cursor passa por cima da tela.
function InseriViva(){
var tela = document.getElementById("tela");
tela.style.backgroundColor="aqua";
tela.style.color="red";
tela.style.borderColor="black";
tela.innerHTML="I'm alive";
}
//Função responsavél pela mensagem I'm alive quando o cursor sai de cima da tela.
function RemovaViva(){
var tela = document.getElementById("tela");
tela.innerHTML="";
tela.style.backgroundColor=" #7FFFD4";
tela.style.color="#000000";
tela.style.borderColor="#000000";
}
//Função responsavél por apagar valores inseridos errado pelo usuário.
function apagar(event){
var tecla = event.which || event.keyCode;
var ap;
if(tecla == 8){
ap = dados.length - 1;
dados.splice(ap,1);
}
}
//Essa é a função principal do programa.
function calculo(){
var n = 0;//variavél de controle de posições no vetor Numero.
var op = 0;//variavel de controle de posições no calculo.
var op2 = 1;//variavel de controle de posições no calculo.
var resultado = 0;//variável que armazena a quantidade de vezes que um símbolo aritmérico apareceu no vetor operacao.
/*Esse for é responsável pelo preenchimento do vetor Numero com os valores que serão calculados
*cada posição desse vetor receberá um número.
*/
alert(dados);
for(var i=0;i<dados.length;i++){
if((dados[i]!="+")&&(dados[i]!="-")&&(dados[i]!="x")&&(dados[i]!="/")){
Numero[n] = Numero[n]+dados[i];
}
else{
n++;
operacao.push(dados[i]);
Numero[n]="";//Preenche o próximo campo do vetor Numero com uma string.
}
alert(Numero);
}
/* Nesse trecho do código os dados do vetor número são convertidos do tipo string para númerico*/
for(var j=0;j<Numero.length;j++){
Numero[j] = parseInt(Numero[j]);
alert(Numero);
}
/* A partir daqui começa os calculos*/
/*Irei dividir as operações em duas partes a primeira irá tratar do calculo com números iguais.
*Exemplo : 2x2x2x2x2x2.
*Já a segunda etapa irá trabalhar com o calculo dos números diferentes.
*Exemplo : 2+2+3-1+4x10+50/2
*/
/*Aqui começa a primeira etapa do processo*/
/*Primeiro vamos descobrir se todas as operações são iguais
*O código abaixo serve para verificar se todas as operações são iguais
*/
var igual = 0;
if(operacao[0]=="x"){
for(var k=0;k<=operacao.length;k++){
if(operacao[k]=="x"){
igual++;
}
else{
break;
}
}
}
else if(operacao[0]=="/"){
for(var k=0;k<=operacao.length;k++){
if(operacao[k]=="/"){
igual++;
}
else{
break;
}
}
}
else if(operacao[0]=="+"){
for(var k=0;k<=operacao.length;k++){
if(operacao[k]=="+"){
igual++;
}
else{
break;
}
}
}
else if(operacao[0]=="-"){
for(var k=0;k<=operacao.length;k++){
if(operacao[k]=="-"){
igual++;
}
else{
break;
}
}
}
//Aqui termina a verificação//
/*
*Nesse trecho começa as operações matemáticas, se todas as operações são iguais
*as instruções dentro do if são executadas senão as operações dentro do else são
* executadas.
*/
if(igual == operacao.length){
if(operacao[0]=="x"){
for(var l=0;l<operacao.length;l++){
Numero[op] = Numero[op]*Numero[op2];
Numero.splice(op2,1);
}
}
else if(operacao[0]=="/"){
for(var l=0;l<operacao.length;l++){
Numero[op] = Numero[op]/Numero[op2];
Numero.splice(op2,1);
}
}
else if(operacao[0]=="+"){
for(var l=0;l<operacao.length;l++){
Numero[op] = Numero[op]+Numero[op2];
Numero.splice(op2,1);
}
}
else if(operacao[0]=="-"){
for(var l=0;l<operacao.length;l++){
Numero[op] = Numero[op]-Numero[op2];
Numero.splice(op2,1);
}
}
ResulFinal = Numero[0];
document.getElementById("tela").innerHTML = Numero;
limpa = 1;
/*Aqui termina a primeira etapa do processo*/
/*Aqui começa a segunda etapa do processo*/
}else{
alert("entrou no outro");
for(var m=0;m<operacao.length;m++){
if(operacao[m]=="x"){
Numero[op] = Numero[op]*Numero[op+1];
Numero.splice(op+1,1);
}
else if(operacao[m]=="/"){
Numero[op] = Numero[op]/Numero[op+1];
Numero.splice(op+1,1);
}
else{
op++;
}
}
op=0;
for(var n=0;n<operacao.length;n++){
if(operacao[n]=="+"){
Numero[op] = Numero[op]+Numero[op2];
Numero.splice(op+1,1);
}
else if(operacao[n]=="-"){
Numero[op] = Numero[op]-Numero[op2];
Numero.splice(op+1,1);
}
}
ResulFinal = Numero[0];
document.getElementById("tela").innerHTML = Numero;
limpa = 1;
}
LimpaDados();
LimpaNumero();
LimpaOperacao();
}
</script>
</body>
</html>