Javascript object htmlspanelement

我想在范围内显示我的计算值，但它返回值"Object HTMLSpanelement"。我认为它必须与我的可变价格超出范围有关？

顺便说一句：我使用innerHTML，因为旧版浏览器支持它，但是你们有什么建议？innerHTML还是innerText？

Anyhoe，我的代码是：

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var hours = document.getElementById("timeH");
var minutes = document.getElementById("timeM");
var price = document.getElementById("priceCalculated");
document.getElementById("priceCalculated").innerHTML=price.toString();
var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        distanceInput.value = parseFloat(response.routes[0].legs[0].distance.value / 1000).toPrecision(4);
        <!-- Added this myself-->
        hours.value = parseFloat(( response.routes[0].legs[0].duration.value / 3600) % 24).toPrecision(4);
        minutes.value = parseFloat(( response.routes[0].legs[0].duration.value / 60) % 60).toPrecision(4);
        <!-- END Adding-->
        price.value = parseFloat( 2.97 + (2.18 * (response.routes[0].legs[0].distance.value / 1000)) + (0.36 * ((response.routes[0].legs[0].duration.value / 60) % 60))).toPrecision(4);
    }
});
}

正如您所注意到的，我使用了距离输入和分钟的整个计算，而不是这些计算的变量名称来计算我的价格。我这样做是因为如果我使用变量名称而不是整个计算，我会得到一个 NaN。但这是题外话。

我的问题是在第 7 行和第 8 行。

添加了我的 HTML*

<div class="modal-content">
<div class="modal-header">
    //bla
</div>
<div class="modal-body">
    <p>
        <div class="col-lg-4">
            <input class="custom_label_left form-control" type="text" name="start" id="start" placeholder="Van..." />
        </div>
        <div class="col-lg-4">
            <input class="custom_label_left form-control" type="text" name="end" id="end" placeholder="Naar..." />
        </div>
        <div class="col-lg-4">
            <button type="button" class="custom_label_left form-control btn btn-info" type="submit" onclick="calcRoute()">Bereken prijs</button>
        </div>
    </p>
    <p>
        <div class="col-md-12">
            <div class="col-sm-6">
                <h3>Ritprijs elders: €<span class="label label-danger" id="priceCalculated" ></span></h3>
            </div>
        </div>
    </p>
</div>
<div class="modal-body" id="map_canvas"></div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Afsluiten</button>
</div>