如何使用 javascript 对 Select 类中的 2 个变量求和？

Question

I've not done any javascript at all and I' trying to sum up 2 values from the select class. I can get both of them displayed, but not summed up. Could anyone explain why I'm getting the "[object HTMLParagraphElement]" as the answer? Thank you

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 (it's janky, was just testing):

 <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

You were getting [object HTMLParagraphElement] because you were console logging the HTML element itself, which in here was result3 . What you actually should have been logged was g . Since that's where you stored your string addition.

It's nothing but a careless mistake.

replace result3 with 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