从文本中进行JavaScript Math计算

Question

我对jQuery＆amp; amp; JavaScript和一直在研究一个简单的计算器，但我在做数学时遇到了问题。

到目前为止，这是我的代码：

$(document).ready(function() {
  $(".btn-merkit").click(function() {

    var value = $(this).val();
    var total = $(".numerot").text();

    var total = total + value;

    $(".numerot").append(value);


    if (value === '=') {
      console.log(total);
    }

    if (value === 'c') {
      $(".numerot").text("");
      console.clear();
    } else {
      console.log(total);
    }

  });
});

.laskinLasku {
  background: yellow;
  width: 100%;
  left: 0;
  position: absolute;
  height: 50px;
  font-size: 40px;
  font-family: Teko;
  color: #000;
  line-height: 50px;
  text-align: right;
}

.napit {
  background: purple;
  width: 100%;
  left: 0;
  position: absolute;
  height: 420px;
  margin-top: 50px;
  color: #000;
}

.btn-merkit {
  height: 45px;
  width: 77px;
  border: none;
  border-radius: 0px;
  font-size: 25px;
  font-family: Teko;
  padding: 5px 10px 20px;
  line-height: 40px;
  float: none;
  margin: 0 auto;
  display: inline-block;
  margin-top: 3px;
}

.textB {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-12 col-lg-12 laskinLasku">
  <span class="numerot" value="0">  </span>
</div>

<div class="col-md-12 col-lg-12 napit">
  <div class="row">

    <button type="button" value="+" class="btn btn-merkit"> <i class="fa fa-plus"></i> </button>
    <button type="button" value="-" class="btn btn-merkit"> <i class="fa fa-minus"></i> </button>
    <button type="button" value="*" class="btn btn-merkit"> <i class="fa fa-times"></i> </button>
    <button type="button" value="/" class="btn btn-merkit"> <span class="textB"> / </span>  </button>

    <button type="button" value="6" class="btn btn-default btn-merkit"> <span class="textB"> 6 </span> </button>
    <button type="button" value="7" class="btn btn-default btn-merkit"> <span class="textB"> 7 </span> </button>
    <button type="button" value="8" class="btn btn-default btn-merkit"> <span class="textB"> 8 </span> </button>
    <button type="button" value="9" class="btn btn-default btn-merkit"> <span class="textB"> 9 </span> </button>

    <button type="button" value="2" class="btn btn-default btn-merkit"> <span class="textB"> 2 </span> </button>
    <button type="button" value="3" class="btn btn-default btn-merkit"> <span class="textB"> 3 </span> </button>
    <button type="button" value="4" class="btn btn-default btn-merkit"> <span class="textB"> 4 </span> </button>
    <button type="button" value="5" class="btn btn-default btn-merkit"> <span class="textB"> 5 </span> </button>


    <button type="button" value="c" class="btn btn-default btn-merkit"> <span class="textB"> C </span> </button>
    <button type="button" value="0" class="btn btn-default btn-merkit"> <span class="textB"> 0 </span> </button>
    <button type="button" value="1" class="btn btn-default btn-merkit"> <span class="textB"> 1 </span> </button>
    <button type="button" value="=" class="btn btn-default btn-merkit"> <span class="textB"> = </span> </button>


  </div>
</div>

所以基本上按 = 按钮后，它应该从<span class="numerot">

进行计算

我尝试从Google查找解决方案，但没有找到任何可以帮助我的方法。

我是新手，所以我希望你帮助我，告诉我应该如何制作。

Answer 1

这是eval()派上用场的地方。它基本上只是将字符串视为代码。按下=后，您可以将当前字符串传递给eval并获得结果。

$(document).ready(function() {
  var total = '' // define outside scope
  
  $(".btn-merkit").click(function() {
  

    var value = $(this).val();
    if (value === '=') {
      var result = eval(total)
      if(!isNaN(result)){
        $(".numerot").text(result);
        total = result.toString()
      }else{
        $(".numerot").text('ERROR');
        total = ''
      }
    }else if (value === 'c') {
      $(".numerot").text("");
      total = ''
    }else{
      total += value;
      $(".numerot").text(total);
    }


  });
});

.laskinLasku {
  background: yellow;
  width: 100%;
  left: 0;
  position: absolute;
  height: 50px;
  font-size: 40px;
  font-family: Teko;
  color: #000;
  line-height: 50px;
  text-align: right;
}

.napit {
  background: purple;
  width: 100%;
  left: 0;
  position: absolute;
  height: 420px;
  margin-top: 50px;
  color: #000;
}

.btn-merkit {
  height: 45px;
  width: 77px;
  border: none;
  border-radius: 0px;
  font-size: 25px;
  font-family: Teko;
  padding: 5px 10px 20px;
  line-height: 40px;
  float: none;
  margin: 0 auto;
  display: inline-block;
  margin-top: 3px;
}

.textB {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-12 col-lg-12 laskinLasku">
  <span class="numerot" value="0">  </span>
</div>

<div class="col-md-12 col-lg-12 napit">
  <div class="row">

    <button type="button" value="+" class="btn btn-merkit"> <i class="fa fa-plus"></i> </button>
    <button type="button" value="-" class="btn btn-merkit"> <i class="fa fa-minus"></i> </button>
    <button type="button" value="*" class="btn btn-merkit"> <i class="fa fa-times"></i> </button>
    <button type="button" value="/" class="btn btn-merkit"> <span class="textB"> / </span>  </button>

    <button type="button" value="6" class="btn btn-default btn-merkit"> <span class="textB"> 6 </span> </button>
    <button type="button" value="7" class="btn btn-default btn-merkit"> <span class="textB"> 7 </span> </button>
    <button type="button" value="8" class="btn btn-default btn-merkit"> <span class="textB"> 8 </span> </button>
    <button type="button" value="9" class="btn btn-default btn-merkit"> <span class="textB"> 9 </span> </button>

    <button type="button" value="2" class="btn btn-default btn-merkit"> <span class="textB"> 2 </span> </button>
    <button type="button" value="3" class="btn btn-default btn-merkit"> <span class="textB"> 3 </span> </button>
    <button type="button" value="4" class="btn btn-default btn-merkit"> <span class="textB"> 4 </span> </button>
    <button type="button" value="5" class="btn btn-default btn-merkit"> <span class="textB"> 5 </span> </button>


    <button type="button" value="c" class="btn btn-default btn-merkit"> <span class="textB"> C </span> </button>
    <button type="button" value="0" class="btn btn-default btn-merkit"> <span class="textB"> 0 </span> </button>
    <button type="button" value="1" class="btn btn-default btn-merkit"> <span class="textB"> 1 </span> </button>
    <button type="button" value="=" class="btn btn-default btn-merkit"> <span class="textB"> = </span> </button>


  </div>
</div>