jQuery在keyup上获取带有类的输入的ID无效

Question

I have a bit of problem with my code here. What I am trying to accomplish is to get the ID of an input field on key up. All the input fields of interest have a class "count". All of them also have the same ID but it increments, say field1, field2, field3. I also have some "answer" inputs.

The mechanism I am trying to accomplish is to first get the ID from the input where I am typing (keyup). Then I proceed to pass in that value (var valueField) to the function updateFields(idNumber). After that, I just simply add 100 to the value of the field#x and finally I append the final value to its matching input with the id of answerx.

My code is not working. Does anybody know why? Is this approach correct? Or would you advise me to change something?

Here's my code:

HTML:

<input type="text" placeholder="" class="count" name="input1" id="1"/>
<input type="text" placeholder="" class="count" name="input2" id="2"/>
<input type="text" placeholder="" class="count" name="input3" id="3"/>

<input type="text" placeholder="" class="answer" name="ans1" id="answer1"/>
<input type="text" placeholder="" class="answer" name="ans2" id="answer2"/>
<input type="text" placeholder="" class="answer" name="ans3" id="answer3"/>

JavaScript:

    $(document).on('keyup','.count',function(){
        var valueField = $(this).attr('id').val();
        updateFields(valueField);
    });

    function updateFields(idNumber){

        var rawVal = $('#field' + idNumber).val();
        var final = rawVal + 100;

        $('#answer' + idNumber).val(final)

    }

Thanks in advance!

Answer 1

When you get the attr('id') you don't need to call .val() . Also your code to get the field assumes a id that starts with 'field' and finally if you are going to take text input and treat is a number you should call parseInt() (with a radix of 10 for decimal), this will work:

 $(document).on('keyup', '.count', function() { var valueField = $(this).attr('id'); updateFields(valueField); }); function updateFields(idNumber) { var rawVal = parseInt($('#' + idNumber).val(), 10); var final = rawVal + 100; $('#answer' + idNumber).val(final) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="" class="count" name="input1" id="1" /> <input type="text" placeholder="" class="count" name="input2" id="2" /> <input type="text" placeholder="" class="count" name="input3" id="3" /> <input type="text" placeholder="" class="answer" name="ans1" id="answer1" /> <input type="text" placeholder="" class="answer" name="ans2" id="answer2" /> <input type="text" placeholder="" class="answer" name="ans3" id="answer3" />