Inserir valores um após o outro sem apagar em uma div

Front-end
#1

Boa noite

Estuda tentando criar uma pequena calculadora em javascript, a tela dela eu uso uma div, aperto um botão e é inserido um valor via javascript na tela até ai tudo certo. O problema é quando eu tento digitar números com mais casas,por exemplo o número 11.

Inserir o número 1 na div eu consigo mas inserir o número 11 não pois o método innerHTML apagar o primeiro valor que seria a primeira casa do número e insere o próximo valor.

Queria saber como fazer para colocar um valor após o outro na mesma div.

Meu código : 

  <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;
			   }
			   
			   
		       #tela{
			    padding:10px;
				padding-left:130px;
				border:1px solid;
				position:absolute;
				bottom:300px;
				left:80px;
				background-color:#7FFFD4;
				font-family:monospace;
			   }
			   
			   
			   #calculadora{
			     
				 padding-left:450px;
				 pading-top:90px;
				 padding-bottom:100px;
				 padding-left:90px;
				 border:solid 1px;
				 border-radius:8px;
				 background-color:#0000a0;
			     margin-left:390px;
				 margin-right:350px;
				 position:relative;
			   
			   }
			   
			   #igual{
			     
				 padding-left:35px;
			   
			   
			   }
			   
			   input[type=button]:hover{
			    
				cursor:pointer;
				border-radius:4px;
				background-color:#B0C4DE;
				
			   }
		
		</style>
		
		
  
  
  </head>
  
  
  <body>
        <h1>Calculadora</h1>
		
		<form id="calculadora">
		      <div type="text" id="tela"></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>
		
		<script>
		        
				 var dados = [];
				 
				 
				function one(){
				 
				    var um = 1;
				    document.getElementById("tela").innerHTML = um;
					dados.push(um);
				}
				 
				 function two(){
				    
					var dois = 2;
					document.getElementById("tela").innerHTML = dois;
					dados.push(dois);
				 
				 }
				 
				 function three(){
				    
					var tres = 3;
					document.getElementById("tela").innerHTML = tres;
					dados.push(tres);
				}
				
				function four(){
				    
					var quatro = 4;
					document.getElementById("tela").innerHTML = quatro;
					dados.push(quatro);
				}
				
				function five(){
				    
					var cinco = 5;
					document.getElementById("tela").innerHTML = cinco;
					dados.push(cinco);
				}
				
				function six(){
				    
					var seis = 6;
					document.getElementById("tela").innerHTML = seis;
					dados.push(seis);
				}
				
				function seven(){
				    
					var sete = 7;
					document.getElementById("tela").innerHTML = sete;
					dados.push(sete);
				}
				
				function eight(){
				    
					var oito = 8;
					document.getElementById("tela").innerHTML = oito;
					dados.push(oito);
				}
				
				function nine(){
				    
					var nove = 9;
					document.getElementById("tela").innerHTML = nove;
					dados.push(nove);
				}
				
				function zero(){
				    
					var zero = 0;
					document.getElementById("tela").innerHTML = zero;
					dados.push(zero);
					
				}
				
				
				 
				 function soma(){
				    
					var soma = "+";
					document.getElementById("tela").innerHTML = soma;
					dados.push(soma);
				 
				 
				 }
				 
				 function subtracao(){
				    
					var sub = "-";
					document.getElementById("tela").innerHTML = sub;
				    dados.push(sub);
				 
				 }
				 
				 function multiplicacao(){
				    
					var mult = "x";
					document.getElementById("tela").innerHTML = mult;
				    dados.push(mult);
				 
				 }
				 
				 function divisao(){
				    
					var div = "/";
					document.getElementById("tela").innerHTML = div;
				    dados.push(div);
				 
				 }
				 
				 function calculo(){
				 
                 var teste = [];
				 var teste2 = [];
				 var resul;
				 
				 if(dados[1] == "+"){
				    
					resul = dados[0] + dados[2];
					document.getElementById("tela").innerHTML = resul;
				 }
				 
				 else if(dados[1] == "-"){
				    
					resul = dados[0] - dados[2];
					document.getElementById("tela").innerHTML = resul;
				 }
				 
				}
				
				
				
				 
		
		</script>
  
  
  </body>
#2

innerHTML não é um método, é uma propriedade.

E pra manter o valor anterior basta usar o operador +=, assim:

document.getElementById("tela").innerHTML += valor;
1 curtida
#3

Vlw, deu certo aqui obrigado pela ajuda e tbm pela correção.

1 curtida