I cannot update the value of a String by clicking on a certain button

Asked

Viewed 32 times

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

javascript dom onclick

  • 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.

1 answer

0


In your HTML, you missed giving the id "screen" to input:

<input id="tela" type="text" class="form-control" placeholder="">

In your Javascript, you had placed a comma in place of the key lock between the object model and the object handlers. Besides, you were doing view.displayTela instead of calling the function by doing view.displayTela(). Fix it, stay like this:

var model = {
    tela: [""],
    addTecla: function(tecla){
        this.tela.push(tecla);
    }
}

var handlers = {
    addTecla: function(tecla){
        model.addTecla(tecla);
        view.displayTela();
    }
}

Finally, its function is displayTela was messing with the innerHTML of input. You better use value in that case:

var view = {
    displayTela: function(){
        var pTela = document.getElementById('tela');
        pTela.value = '';
        var tela = model.tela.join('');
        pTela.value = tela;
    }
}

There are several other things that can be improved there, but for now, it solves the problem. Good studies!

Browser other questions tagged javascript dom onclick

You are not signed in. Login or sign up in order to post.