Как мне суммировать 2 переменные из класса Select с javascript?

Question

Я вообще ничего не сделал javascript, и я пытаюсь суммировать 2 значения из класса выбора. Я могу отобразить их обоих, но не суммировать. Может кто-нибудь объяснить, почему я получаю «[object HTMLParagraphElement]» в качестве ответа? Спасибо

function GetSelectedValue1() {
    const f = document.getElementById("value1");
    const result = f.options[f.selectedIndex].value;

    document.getElementById("result").innerHTML = result;


    const e = document.getElementById("value2");
    const result2 = e.options[e.selectedIndex].value;

    document.getElementById("result2").innerHTML = result2;


    const g = +result + result2;
    document.getElementById("result3").innerHTML = result3;

}

HTML (это было вяло, только что тестировал):

 <div class="container vertical-center d-flex justify-content-center" id="stock-box">
            <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center list-group-item-action">
                    <b>Order:</b>
                    <div class="btn-group">
                        <select class="custom-select" name="stock-box-margin40" id="value1">
                            <option selected>Choose Quantity</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                        <p id="result">United State</p>
                        <button type="button" onclick="GetSelectedValue1()">Get Selected Value</button>
                    </div>
                </li>
                <ul class="list-group" id="list-group-mtop">
                    <li class="list-group-item d-flex justify-content-between align-items-center list-group-item-action">
                        <b>Order:</b>
                        <div class="btn-group">
                            <select class="custom-select" name="stock-box-margin40-3" id="value2">
                                <option selected>Choose Quantity</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>

                            <p id="result2">United State</p>
                            <button type="button" onclick="GetSelectedValue2();GetSelectedValue1()">Get Selected Value</button>
                            <p id="result3">United State</p>
                            <button type="button" onclick="GetSelectedValue1()">Get Selected Value</button>
                        </div>
                    </li>
                </ul>
            </ul>
        </div>

Answer 1

Вы получаете [object HTMLParagraphElement], потому что вы консоль регистрировали сам элемент HTML, который здесь был result3. На самом деле вы должны были зарегистрироваться g. Так как именно там вы сохранили свои строковые дополнения.

Это всего лишь неосторожная ошибка.

заменить result3 на g,

// If you want to perform string addition
const g = result + result2; 

// If you want to perform numerical addition

// Using bitwise or (|) is the fastest way to convert string to number in JS
// You can also save a few bytes in your JavaScript code by using 
// the | (bitwise-or) operator instead of parseInt or 
// uniary opertor (+) as addressed in the comment section
const g = (result | 0) + (result2 | 0);

document.getElementById("result3").innerHTML = g; // not result3