JavaScript 对象 htmlspanelement

Question

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

顺便说一句:我使用innerHTML，因为旧版浏览器支持它，但是你们有什么建议？内部 HTML 还是内部文本？

无论如何，我的代码是:

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);
    }
});
}

正如您所注意到的，我使用了 distanceInput 和分钟的整个计算，而不是这些计算的变量名称来计算我的价格。我这样做是因为如果我使用变量名而不是整个计算，我会得到 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>

Answer 1

检查这个demo .

尝试:

//var price = document.getElementById("priceCalculated");
//document.getElementById("priceCalculated").innerHTML=price.toString();
var total  = 0;
document.getElementById("priceCalculated").textContent = total.toString();
...
//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);
total = 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);

innerHTML 或 innerText？

建议:尝试使用 jQuery 或 .textContent @Barmar 的建议。