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

Question

我根本没有做过任何 javascript，我试图从 select 类中总结 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 。 因为那是您存储字符串添加的地方。

这只不过是一个粗心的错误。

用g替换result3 ，

// 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