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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.