I'm doing a project for a calculator and I can not update the screen when someone presses the number 7, for example. Here is the code:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="py-0 text-center w-25"><div class="container">
<form>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" placeholder="">
</div>
</div>
</form>
</div></div>
<div class="py-0 text-center w-25"><div class="container">
<div class="row">
<div class="col-md-3 btn btn-danger">AC</div>
<div class="col-md-3 btn btn-danger">c</div>
<div class="col-md-3 btn btn-primary">/</div>
<div class="col-md-3 btn btn-primary ">x</div>
</div></div></div><div class="py-0 text-center w-25"><div class="container"><div class="row">
<div class="col-md-3 btn btn-primary" onclick="handlers.addTecla('7')">7</div>
<div class="col-md-3 btn btn-primary">8</div>
<div class="col-md-3 btn btn-primary">9</div>
<div class="col-md-3 btn btn-primary">-</div>
</div></div></div><div class="py-0 text-center w-25"><div class="container"><div class="row">
<div class="col-md-3 btn btn-primary">4</div>
<div class="col-md-3 btn btn-primary">5</div>
<div class="col-md-3 btn btn-primary">6</div>
<div class="col-md-3 btn btn-primary">+</div>
</div></div></div><div class="py-0 text-center w-25"><div class="container"><div class="row">
<div class="col-md-3 w-25 btn btn-primary">1</div>
<div class="col-md-3 btn btn-primary">2</div>
<div class="col-md-3 btn btn-primary">3</div>
<div class="col-md-3 btn btn-primary">=</div>
</div></div></div>
<div class="py-0 text-center w-25"><div class="container"><div class="row">
<div class="col-md-3 btn btn-primary">%</div>
<div class="col-md-3 btn btn-primary">0</div>
<div class="col-md-3 btn btn-primary">.</div>
<div class="col-md-3 btn btn-primary">LN</div>
</div></div></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.col-md-3{
max-width: 50px;
margin: 1px;
}
.col-md-12{
max-width: 206px;
margin: 1px;
}
JavaScript:
var model = {
tela: [""],
addTecla: function(tecla){
this.tela.push(tecla);
},
var handlers = {
addTecla: function(tecla){
model.addTecla(tecla);
view.displayTela;
}
}
var view = {
displayTela: function(){
var pTela = document.getElementById('tela');
pTela.innerHTML = '';
var tela = model.tela.join('');
pTela.innerHTML = tela;
}
}
Link in codepen: link