X + Y дает HTMLObject (выбор / опция)

Question

Я пытаюсь добавить 2 суммы, которые выбираются опцией выбора.

Все, что я хочу, это вычислить X + Y, но я получаю странную ошибку.

Код:

$( document ).ready(function() {
    var id1 = $("#one").val();
    $("#final_value").val(id1);

    var id2 = $("#two").val();
    $("#final_value").val(id2);

    $("#final_value").val(this + parseInt(id1) + parseInt(id2));    
});

https://jsfiddle.net/xpvt214o/957709/

Answer 1

Просто удалите это ключевое слово из суммы:

$( document ).ready(function() {
    var id1 = $("#one").val();
    $("#final_value").val(id1);

    var id2 = $("#two").val();
    $("#final_value").val(id2);

    $("#final_value").val(parseInt(id1) + parseInt(id2));    
});

Answer 2

Я немного изменил код Гари Томаса:

Вместо parseInt (), вы можете использовать так:

var id1 = +$("#one").val();
var id2 = +$("#two").val();

	$(document).ready(function() {
    $("#one, #two").on("change", () => {
        var id1 = +$("#one").val();
        var id2 = +$("#two").val();
        var total = id1+id2;
        $("#final_value").val(total);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td>
    <select class="full-width select2" name="" id="one" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<td>
    <select class="full-width select2" name="" id="two" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<label for="final_value">Result:</label>
<input type="text" value="" id="final_value">

Answer 3

Удалить this значение:

От:

$("#final_value").val(this + parseInt(id1) + parseInt(id2));

До:

$("#final_value").val(parseInt(id1) + parseInt(id2));

Причинаесли вы будете использовать this ваша функция возвращает строку в виде:

[object HTMLDocument]11

Answer 4

У вас есть this в вашем #final_value элементе.Я также добавил событие change в ваш код, чтобы оно обновлялось при изменении одного из параметров:

$(document).ready(function() {
    $("#one, #two").on("change", () => {
        var id1 = $("#one").val();
        var id2 = $("#two").val();

        $("#final_value").val(parseInt(id1) + parseInt(id2));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <select class="full-width select2" name="" id="one" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<td>
    <select class="full-width select2" name="" id="two" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<label for="final_value">Result:</label>
<input type="text" value="" id="final_value">

Answer 5

В последнем утверждении есть this, замените последнюю строку на:

$("#final_value").val(parseInt(id1) + parseInt(id2));

Теперь это должно работать.