如何使用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