Javascript对象htmlspanelement

Question

我想在span中显示我的计算值，但它返回值“Object HTMLSpanelement”。我认为我的可变价格超出范围必须做些什么？

BTW：我使用的是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);
    }
});
}

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