Estoy tratando de que por lo menos escriba algo pero resulta que los botones no aparecen en la pantalla, cuando ejecuto el codigo no escribe, no se si el problema esta en la declaracion de las valriables en js.
var primern;
var segundon;
var resultado2;
function init(){
var pantalla = document.getElementsByClassName('pantalla');
var igual = document.getElementsByClassName('igual');
var limpiar = document.getElementsByClassName('limpiar');
var suma = document.getElementsByClassName('suma');
var resta = document.getElementsByClassName('resta');
var multiplicacion = document.getElementsByClassName('multiplicacion');
var divicion = document.getElementsByClassName('divicion');
var numero1 = document.getElementsByClassName('numero1');
var numero2 = document.getElementsByClassName('numero2');
var numero3 = document.getElementsByClassName('numero3');
var numero4 = document.getElementsByClassName('numero4');
var numero5 = document.getElementsByClassName('numero5');
var numero6 = document.getElementsByClassName('numero6');
var numero7 = document.getElementsByClassName('numero7');
var numero8 = document.getElementsByClassName('numero8');
var numero9 = document.getElementsByClassName('numero9');
var cero = document.getElementsByClassName('cero');
numero1.onclick = function(e){
pantalla.textContent = pantalla.textContent + "1";
}
numero2.onclick = function(e){
pantalla.textContent = pantalla.textContent + "2";
}
numero3.onclick = function(e){
pantalla.textContent = pantalla.textContent + "3";
}
numero4.onclick = function(e){
pantalla.textContent = pantalla.textContent + "4";
}
numero5.onclick = function(e){
pantalla.textContent = pantalla.textContent + "5";
}
numero6.onclick = function(e){
pantalla.textContent = pantalla.textContent + "6";
}
numero7.onclick = function(e){
pantalla.textContent = pantalla.textContent + "7";
}
numero8.onclick = function(e){
pantalla.textContent = pantalla.textContent + "8";
}
numero9.onclick = function(e){
pantalla.textContent = pantalla.textContent + "9";
}
cero.onclick = function(e){
pantalla.textContent = pantalla.textContent + "0";
}
limpiar.onclick = function(e){
recetear();
}
suma.onclick = function(e){
primern = pantalla.textContent;
resultado2 = "+";
limpiar();
}
resta.onclick = function(e){
primern = pantalla.textContent;
resultado2 = "-";
limpiar();
}
multiplicacion.onclick = function(e){
primern = pantalla.textContent;
resultado2 = "*";
limpiar();
}
divicion.onclick = function(e){
primern = pantalla.textContent;
resultado2 = "/";
limpiar();
}
igual.onclick = function(e){
segundon = pantalla.textContent;
igual();
}
}
table{
border:solid;
border-style:ridge;
border-radius: 12px;
width:290px;
display:inline-block;
top: 200px;
background:#393333;
border-radius: 12px
}
td button:hover{
background:#ccc;
}
td button:active{
background:#5DADE2;
}
.pantalla{
/*color: black;
border-radius:100px;
border: solid;
padding:5px;
width: 260px;
background:#EDEDED;*/
display:block;
text-align:right;
font-size:30px;
margin-bottom:50px;
width:280px;
height:90px;
line-height:100px;
background-color:#fff;
border-radius:80px;
margin-top:1px;
position:relative;
top:52px;
}
/*td button{
padding:25px;
}*/
.numero7{
padding:25px;
}
.numero8{
padding: 25px;
}
.numero9{
padding: 25px;
}
.numero4{
padding: 25px;
}
.numero5{
padding: 25px;
}
.numero6{
padding: 25px;
}
.numero1{
padding: 25px;
}
.numero2{
padding: 25px;
}
.numero3{
padding: 25px;
}
.divicion{
padding: 25px;
width: 64px;
}
.multiplicacion{
padding: 25px;
width: 64px;
}
.resta{
padding: 25px;
width: 64px;
top:266px;
}
.igual{
padding: 25px;
width:64px;
}
.suma{
padding:25px;
}
.limpiar{
padding:24px;
}
.cero{
padding:25px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo/estilo.css">
<title>Calculadora</title>
</head>
<body onload="init();">
<h1>CALCULADORA</h1>
<table class="Calculadora">
<tr >
<td colspan="4"><span class="pantalla"></span></td>
</tr>
<tr>
<td><button class="numero7">7</button></td>
<td><button class="numero8">8</button></td>
<td><button class="numero9">9</button></td>
<td><button class="divicion">%</button></td>
</tr>
<tr>
<td><button class="numero4">4</button></td>
<td><button class="numero5">5</button></td>
<td><button class="numero6">6</button></td>
<td><button class="multiplicacion">X</button></td>
</tr>
<tr>
<td><button class="numero1">1</button></td>
<td><button class="numero2">2</button></td>
<td><button class="numero3">3</button></td>
<td><button class="resta">-</button></td>
</tr>
<tr>
<td><button class="limpiar">C</button></td>
<td><button class="cero">0</button></td>
<td ><button class="suma">+</button></td>
<td><button class="igual">=</button></td>
</tr>
</table>
<script type="text/javascript" src="js/calculadora.js"></script>
</body>
</html>