Adjust string in HTML calculator

Asked

Viewed 44 times

1

I have this calculator that is not my own and that works perfectly.

The problem is that when we multiply, the display appears asterisk and not x. I wish that when clicking to multiply, appeared x on display and no asterisk.

$(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>

jquery
  • 2

    Post the full code, including HTML

  • Hello Diego. I changed the post with the full code.

  • Man, it’s gonna suck to mess with that 'cause the operation is done with eval. You’d have to validate before that and spoil the way the other person did.

2 answers

2


Just reverse the order of the function calls a little. I highlighted the code below, but basically you keep the call from .val() with a = *, for so the eval will work. Put the .append(), which displays the values in the display down and replaces the character before the call of this function. Thus, the substitution will occur only when displaying the character, not when analyzing it.

$(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>

  • Thanks Anderson. It worked!

1

How did you change the * for x at the time of showing, you will need to reverse this before performing the calculation:

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

See working

Browser other questions tagged jquery

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