Javascript object htmlspanelement

Question

I want to display my calculated value inside a span but it returns the value "Object HTMLSpanelement". I think it has to do something with my variable price being out of scope?

BTW: I use innerHTML because this is supported by older browsers, but what do you guys suggest? innerHTML or innerText?

Anyhoe, my code is:

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

As you notice, I used the whole calculation of distanceInput and minutes instead of the variable names of these calculations to calculate my price. I did this because I got a NaN if I used the variable names instead of the whole calculation. But that is off topic.

My problem is at line 7 and 8.

added my 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>

If you see something like "[object HTMLSpanElement]", then your variable was pointing to the <span> and you tried to convert this to a String. You probably wanted the variable to hold the contents of the element instead, e.g. by accessing it's .textContent property — Paul S.
– Paul S., Commented Jan 27, 2016 at 23:57

Sebastian Simon · Accepted Answer · 2018-04-08 14:34:19Z

2

Check this demo.

Try:

//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` or `innerText`?

Suggestion: try with jQuery or .textContent @Barmar’s suggestion.

edited Apr 8, 2018 at 14:34

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

answered Jan 27, 2016 at 21:27

Mate

5,3272 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barmar Over a year ago

Don't ever use innerText, it's non-standard and doesn't exist in Firefox. The correct name is textContent.

Mirwais Over a year ago

The application does not perform the calculations if I add .value. The button just does nothing.

Mirwais Over a year ago

@Mate Yes, fixed it! I just added document.getElementById("priceCalculated").textContent = total.toString(); after total = parseFloat ( 2.97...) and it worked. Otherwise it would display 0 the whole time. Thank you for guiding me into the right direction :)

Mate Over a year ago

Great!! Keep in mind this other function to validate numeric parse : " isNaN(parseFloat("yourNumberText")) "

Collectives™ on Stack Overflow

Javascript object htmlspanelement

1 Answer 1

`innerHTML` or `innerText`?

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

innerHTML or innerText?

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`innerHTML` or `innerText`?