JavaScript calculated field - Stack Overflow

admin管理员组

文章数量:1025541

I just can't see what am I doing wrong... It doesn't calculate the "stunden" field.

There is some small mistake from my side and I just can't see it.

EDITED: now all is working as it should

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src=".1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

I just can't see what am I doing wrong... It doesn't calculate the "stunden" field.

There is some small mistake from my side and I just can't see it.

EDITED: now all is working as it should

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

• javascript

Share Improve this question Follow edited May 30, 2016 at 10:05 lewis4u asked May 30, 2016 at 8:51 lewis4ulewis4u 15.1k2222 gold badges113113 silver badges158158 bronze badges 4

• What this code is suppose to do? What is expected output? – brk Commented May 30, 2016 at 8:52
• just to calculate the stunden input field from the starts and ends fields. stunden field is readonly and is a difference between starts and ends. – lewis4u Commented May 30, 2016 at 8:53
• 1 .stunden is readonly and you listen to a keyup event on this input control. Therefore it's not possible this code will ever get executed – Dieterg Commented May 30, 2016 at 8:54
• yes you are right :( i changed it to listen .ends on keyup and it still doesn't work – lewis4u Commented May 30, 2016 at 8:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The problem is that you are recalculating when a key is pressed in the .stunden fields, so you should move the event to the other inputs, or the parent row. You'll need something like this.

$('.item').keyup(function(){
  var starts = 0;
  var ends = 0;
  var stunden = 0;
  if (!isNaN($(this).find(".starts").val())) {
    starts = $(this).find(".starts").val();
  }
  if (!isNaN($(this).find(".ends").val())) {
    ends = $(this).find(".ends").val();
  }
  stunden = starts - ends;
  $(this).find(".stunden").val(stunden);
});

Let me try your original keyup code .ends ,I just want to explain how is work below code

• call .starts ,we currently in tr>td>input ,so need backup to tr by parent() then we find .starts inside its elements.As also .ends

• find .studen is also in state tr>td>input ,so backup to td and go next td by next() then find .studen .

  $(document).ready(function(){
      $('.ends').keyup(function(){
              var starts = 0;
              var ends = 0;
              var stunden = 0;            
              if (!isNaN($(this).parent().parent().find(".starts").val())) {
                  starts = $(this).parent().parent().find(".starts").val();
              }
              if (!isNaN($(this).parent().parent().find(".ends").val())) {
                  ends = $(this).parent().parent().find(".ends").val();
              }            
              stunden = starts - ends;
              $(this).parent().next().find('.stunden').val(stunden);
  
      });    
  }); 
  

I just can't see what am I doing wrong... It doesn't calculate the "stunden" field.

There is some small mistake from my side and I just can't see it.

EDITED: now all is working as it should

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src=".1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

I just can't see what am I doing wrong... It doesn't calculate the "stunden" field.

There is some small mistake from my side and I just can't see it.

EDITED: now all is working as it should

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

• javascript

Share Improve this question Follow edited May 30, 2016 at 10:05 lewis4u asked May 30, 2016 at 8:51 lewis4ulewis4u 15.1k2222 gold badges113113 silver badges158158 bronze badges 4

• What this code is suppose to do? What is expected output? – brk Commented May 30, 2016 at 8:52
• just to calculate the stunden input field from the starts and ends fields. stunden field is readonly and is a difference between starts and ends. – lewis4u Commented May 30, 2016 at 8:53
• 1 .stunden is readonly and you listen to a keyup event on this input control. Therefore it's not possible this code will ever get executed – Dieterg Commented May 30, 2016 at 8:54
• yes you are right :( i changed it to listen .ends on keyup and it still doesn't work – lewis4u Commented May 30, 2016 at 8:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The problem is that you are recalculating when a key is pressed in the .stunden fields, so you should move the event to the other inputs, or the parent row. You'll need something like this.

$('.item').keyup(function(){
  var starts = 0;
  var ends = 0;
  var stunden = 0;
  if (!isNaN($(this).find(".starts").val())) {
    starts = $(this).find(".starts").val();
  }
  if (!isNaN($(this).find(".ends").val())) {
    ends = $(this).find(".ends").val();
  }
  stunden = starts - ends;
  $(this).find(".stunden").val(stunden);
});

Let me try your original keyup code .ends ,I just want to explain how is work below code

• call .starts ,we currently in tr>td>input ,so need backup to tr by parent() then we find .starts inside its elements.As also .ends

• find .studen is also in state tr>td>input ,so backup to td and go next td by next() then find .studen .

  $(document).ready(function(){
      $('.ends').keyup(function(){
              var starts = 0;
              var ends = 0;
              var stunden = 0;            
              if (!isNaN($(this).parent().parent().find(".starts").val())) {
                  starts = $(this).parent().parent().find(".starts").val();
              }
              if (!isNaN($(this).parent().parent().find(".ends").val())) {
                  ends = $(this).parent().parent().find(".ends").val();
              }            
              stunden = starts - ends;
              $(this).parent().next().find('.stunden').val(stunden);
  
      });    
  }); 
  

本文标签： JavaScript calculated fieldStack Overflow