html - Javascript object htmlspanelement -
i want display calculated value inside span returns value "object htmlspanelement". think has variable price being out of scope?
btw: use innerhtml because supported older browsers, guys suggest? innerhtml or innertext?
anyhoe, 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 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 notice, used whole calculation of distanceinput , minutes instead of variable names of these calculations calculate price. did because got nan if used variable names instead of whole calculation. off topic.
my problem @ line 7 , 8.
added 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>
check 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); q:innerhtml or innertext?
suggest: try jquery or .textcontent [ @barman suggestion ]
Comments
Post a Comment