1
I’m doing a calculator project and I’m not able to update the screen when someone keystrokes the number 7, for example. Here’s 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 the codepen: https://codepen.io/LucasNavarro/pen/JOMEmz
Lucas, always try to put a [mcve] here of the code and not just the part that you think is important, because it may be that the problem is in the part that you didn’t put here, as was the case now. The codepen link is cool, but as an extra.
– Pablo Almeida