1

Tenho essa calculadora que não é de minha autoria e que funciona perfeitamente.

O problema é que quando vamos multiplicar, no display aparece asterisco e não x. Gostaria que ao clicar para multiplicar, aparecesse x no display e não asterisco.

$(function(){
    $(".val").click(function(e){
         e.preventDefault();
          var a = $(this).attr("href");

           if(a == '*'){ a = 'x'; }else{ a = a; } // Alterei aqui!

         $(".screen").append(a);
           $(".outcome").val($(".outcome").val() + a);
    });

     $(".equal").click(function(){
          $(".outcome").val(eval($(".outcome").val()));
          $(".screen").html(eval($(".outcome").val()));
     });

     $(".clear").click(function(){
          $(".outcome").val("");
          $(".screen").html("");
     });

     $(".min").click(function(){
         $(".cal").stop().animate({width: "0px", height: "0px", marginLeft: "700px", marginTop: "1000px"}, 500);
        setTimeout(function(){$(".cal").css("display", "none")}, 600);
     });

     $(".close").click(function(){
          $(".cal").css("display", "none");
     })
})
.calculator {
    width:480px;
    height:auto;
    padding:10px 0;
    margin: auto;
    background:#232323;
    border:#000 1px solid;
    border-radius:7px;
    -webkit-border-radius:7px;
     -moz-border-radius:7px;
     box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     -webkit-box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     -moz-box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     background-image:-moz-linear-gradient(top, #333333, #1f1f1f);
      background-image:-webkit-linear-gradient(top, #333333, #1f1f1f);
       background-image:linear-gradient(top, #333333, #1f1f1f);
     overflow: hidden;
     text-align: center;
}

.screen {
     width:424px;
     height:93px;
    margin: 12px auto 30px;
     padding:15px 20px;
     color:#c0c0c0;
     text-align: right;
     font-size: 3em;
     letter-spacing: 3px;
     overflow:hidden;
     border:#000 1px solid;
     border-radius:7px;
     -webkit-border-radius:7px;
     -moz-border-radius:7px;
     box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     background-image: -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
      background-image: -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
      background-image: linear-gradient(top, #3e3e3e 0%, #303030 100%);
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
}

.buttons {
     padding:0;
     width:423px;
     margin:auto;
     overflow: hidden;
     list-style: none;
}
.buttons li {
     display:inline;
     float:left;
     padding:0px;
     margin-right:13px;
     margin-bottom:10px;
}
.buttons li:nth-child(4n) {
     margin-right:0;
}

.buttons a{
     display:block;
     width:95px;
     height:68px;
     padding:18px 0 12px;
     color:#c0c0c0 !important;
     font-family: "Myriad Pro", Arial, sans-serif;
     font-size:1.6em;
     font-weight: 500;
    letter-spacing: -2px;
    background-color:#2f2f2f;
     border: #000 1px solid;
     border-radius:5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     text-align: center;
     text-decoration: none;
    text-shadow:#000 0px -1px 0px;
     box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
     -webkit-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
     -moz-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
    background-image:-moz-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
      background-image:-webkit-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
       background-image:linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     cursor: pointer;
}
.buttons a:active{
     box-shadow: inset rgba(0,0,0,0.5) 0px 2px 8px;
     background-image:-moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
      background-image:-webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
       background-image:linear-gradient(top, #2f2f2f 0%, #363636 100%);
}
.tall{height:151px !important;}
.wide{width:205px !important;}
.shift{margin-top:-78px;}

.ctrls{
 list-style: none;
 margin:5px 0 0 20px;
 padding:0;
 position: absolute;
}
.ctrls li{
 float:left;
 display:inline;
}
.ctrls li a{
 display: block;
 width:18px;
 height:18px;
 margin-right:10px;
 border-radius:100%;
 box-shadow:rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(0,0,0,1) 0px 1px 2px 1px;
 background-image: -moz-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -moz-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
 background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
 background-image: radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <div class="calculator">
        <div class="screen"></div>
        <input type="hidden" value="" class="outcome" />
        <ul class="buttons">
            <li class="clear"><a>C</a></li>
            <li><a href="-" class="val">&plusmn;</a></li>
            <li><a href="/" class="val">&divide;</a></li>
            <li><a href="*" class="val">&times;</a></li>
            <li><a href="7" class="val">7</a></li>
            <li><a href="8" class="val">8</a></li>
            <li><a href="9" class="val">9</a></li>
            <li><a href="-" class="val">-</a></li>
            <li><a href="4" class="val">4</a></li>
            <li><a href="5" class="val">5</a></li>
            <li><a href="6" class="val">6</a></li>
            <li><a href="+" class="val">+</a></li>
            <li><a href="1" class="val">1</a></li>
            <li><a href="2" class="val">2</a></li>
            <li><a href="3" class="val">3</a></li>
            <li><a class="equal tall">=</a></li>
            <li><a href="0" class="val wide shift">0</a></li>
            <li><a href="." class="val shift">.</a></li>
        </ul>
    </div>
</div>

3
  • 2
    Posta o código completo, inclusive o HTML 28/06/2017 às 18:58
  • Olá Diego. Alterei o post com o código completo.
    – user24136
    28/06/2017 às 19:05
  • Cara, vai ser um saco mexer nisso porque a operação é feita com eval. Você teria que validar antes disso e estragar a maneira que a outra pessoa fez.
    – Jéf Bueno
    28/06/2017 às 19:12

2 Respostas 2

2

Basta inverter um pouco a ordem das chamadas das funções. Coloquei em destaque no código abaixo, mas basicamente você mantém a chamada de .val() com a = *, pois assim o eval funcionará. Coloque o .append(), que exibe os valores no display para baixo e faça a substituição do caractere antes da chamada desta função. Assim, a substituição ocorrerá apenas na hora de exibir o caractere, não na hora de analisá-lo.

$(function() {
  $(".val").click(function(e) {
    e.preventDefault();
    var a = $(this).attr("href");
    
    // ----------------------------------------------------
    // Altere a ordem de .val() e .append() aqui.
    // E coloque o seu if após o .val()
    
    $(".outcome").val($(".outcome").val() + a);
    
    if (a == "*") { a = "x"; }
    $(".screen").append(a);
    
    // ----------------------------------------------------
  });

  $(".equal").click(function() {
    $(".outcome").val(eval($(".outcome").val()));
    $(".screen").html(eval($(".outcome").val()));
  });

  $(".clear").click(function() {
    $(".outcome").val("");
    $(".screen").html("");
  });

  $(".min").click(function() {
    $(".cal").stop().animate({
      width: "0px",
      height: "0px",
      marginLeft: "700px",
      marginTop: "1000px"
    }, 500);
    setTimeout(function() {
      $(".cal").css("display", "none")
    }, 600);
  });

  $(".close").click(function() {
    $(".cal").css("display", "none");
  })
})
.calculator {
  width: 480px;
  height: auto;
  padding: 10px 0;
  margin: auto;
  background: #232323;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  background-image: -moz-linear-gradient(top, #333333, #1f1f1f);
  background-image: -webkit-linear-gradient(top, #333333, #1f1f1f);
  background-image: linear-gradient(top, #333333, #1f1f1f);
  overflow: hidden;
  text-align: center;
}

.screen {
  width: 424px;
  height: 93px;
  margin: 12px auto 30px;
  padding: 15px 20px;
  color: #c0c0c0;
  text-align: right;
  font-size: 3em;
  letter-spacing: 3px;
  overflow: hidden;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  -webkit-box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  -moz-box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  background-image: -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
  background-image: -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
  background-image: linear-gradient(top, #3e3e3e 0%, #303030 100%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.buttons {
  padding: 0;
  width: 423px;
  margin: auto;
  overflow: hidden;
  list-style: none;
}

.buttons li {
  display: inline;
  float: left;
  padding: 0px;
  margin-right: 13px;
  margin-bottom: 10px;
}

.buttons li:nth-child(4n) {
  margin-right: 0;
}

.buttons a {
  display: block;
  width: 95px;
  height: 68px;
  padding: 18px 0 12px;
  color: #c0c0c0 !important;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: -2px;
  background-color: #2f2f2f;
  border: #000 1px solid;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-align: center;
  text-decoration: none;
  text-shadow: #000 0px -1px 0px;
  box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  background-image: -moz-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  background-image: -webkit-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  background-image: linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

.buttons a:active {
  box-shadow: inset rgba(0, 0, 0, 0.5) 0px 2px 8px;
  background-image: -moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
  background-image: -webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
  background-image: linear-gradient(top, #2f2f2f 0%, #363636 100%);
}

.tall {
  height: 151px !important;
}

.wide {
  width: 205px !important;
}

.shift {
  margin-top: -78px;
}

.ctrls {
  list-style: none;
  margin: 5px 0 0 20px;
  padding: 0;
  position: absolute;
}

.ctrls li {
  float: left;
  display: inline;
}

.ctrls li a {
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 100%;
  box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px, inset rgba(0, 0, 0, 1) 0px 1px 2px 1px;
  background-image: -moz-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="calculator">
    <div class="screen"></div>
    <input type="hidden" value="" class="outcome" />
    <ul class="buttons">
      <li class="clear"><a>C</a></li>
      <li><a href="-" class="val">&plusmn;</a></li>
      <li><a href="/" class="val">&divide;</a></li>
      <li><a href="*" class="val">&times;</a></li>
      <li><a href="7" class="val">7</a></li>
      <li><a href="8" class="val">8</a></li>
      <li><a href="9" class="val">9</a></li>
      <li><a href="-" class="val">-</a></li>
      <li><a href="4" class="val">4</a></li>
      <li><a href="5" class="val">5</a></li>
      <li><a href="6" class="val">6</a></li>
      <li><a href="+" class="val">+</a></li>
      <li><a href="1" class="val">1</a></li>
      <li><a href="2" class="val">2</a></li>
      <li><a href="3" class="val">3</a></li>
      <li><a class="equal tall">=</a></li>
      <li><a href="0" class="val wide shift">0</a></li>
      <li><a href="." class="val shift">.</a></li>
    </ul>
  </div>
</div>

1
  • Obrigado Anderson. Funcionou!
    – user24136
    28/06/2017 às 19:42
1

Como você trocou o * por x na hora de mostrar, você precisará reverter isso antes de efetuar o cálculo:

$(".equal").click(function(){
    $(".outcome").val(eval($(".outcome").val().replace("x","*")));
    $(".screen").html(eval($(".outcome").val()));
});    

Veja funcionando

Você deve fazer log-in para responder a esta pergunta.