javascript - 检查表单输入是否等于特定文本，如果是，则执行计算并在另一个输入字段中打印

Question

我希望能够检查两个输入字段值(返回和质押)，例如100 和 20

如果结果字段= win，则执行计算:返回(负 - )stakePlaced，然后将结果显示在另一个名为profit的字段中。

PHP 被用来从表中提取数据 --- 忽略 PHP 代码。

HTML

<div class="form-group">
  <label for="stakePlaced">Stake Placed</label>
  <input type="text" class="form-control mb-2" placeholder="stakePlaced" name="stakePlaced" value="<?php echo $stakePlaced ?>">
</div>

<div class="form-group">
  <label for="result">Result</label>
  <input type="text" class="form-control mb-2" placeholder="result" name="result" id="result" onchange="calcula" value="<?php echo $result ?>">
</div>

<div class="form-group">
  <label for="return">Return</label>
  <input type="text" class="form-control mb-2" placeholder="return" name="return" id="return" value="<?php echo $return ?>">
</div>

<div class="form-group">
  <label for="return">Profit</label>
  <input type="text" class="form-control mb-2" placeholder="profit" name="profit" id="profit" value="<?php echo $profit ?>">
</div>

JS

  function calcula(){
    $(document).ready(function(){
      $("#result").keyup(function(){
        if (this.value == "Win"){
          var vreturn = document.getElementById('return').value;
          var stake = document.getElementById('stakePlaced').value; 
          var result = parseFloat(vreturn)-parseFloat(stake);

          var secresult = result.toFixed(2);

          document.getElementById('profit').value = secresult;
       }
    });
});
 window.onload = calcula;

Answer 1

你的数学不清楚...我不知道在处理数值时该值如何Win...但这可能超出了范围。

要通过name获取输入值(因为没有id)，您可以使用attribute selectors .

见下文...在“结果”字段中输入“Win”(第二个)。它将在“利润”字段(最后一个)中输出“0.00”。

$(document).ready(function(){
  $("#result").keyup(function(){
    if (this.value == "Win"){
      console.log("Win!");
      var vreturn = $("[name='return']").val();
      var stake = $("[name='stakePlaced']").val(); 
      var result = parseFloat(vreturn)-parseFloat(stake);

      var secresult = result.toFixed(2);

      $("[name='profit']").val(secresult);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
  <label for="stakePlaced">Stake Placed</label>
  <input type="text" class="form-control mb-2" placeholder="stakePlaced" name="stakePlaced" value="20">
</div>

<div class="form-group">
  <label for="result">Result</label>
  <input type="text" class="form-control mb-2" placeholder="result" name="result" id="result" value="100">
</div>

<div class="form-group">
  <label for="return">Return</label>
  <input type="text" class="form-control mb-2" placeholder="return" name="return" value="20">
</div>

<div class="form-group">
  <label for="return">Profit</label>
  <input type="text" class="form-control mb-2" placeholder="profit" name="profit" value="30">
</div>

并且您不需要在运行于 window.onload 的命名函数中拥有 $(document).ready(function(){... ;)