Search code examples
javascriptgoogle-mapstextboxinnerhtml

I have calculated distance and time in an innerHTML and I can not pass it using the id in a textbox. How can I fix that?

I am setting time and distance in an innerHTML field but I want to show it inside a textbox. I Am really new to javascript and while innerHTML works ok I think its better to show this info in a box. Any ideas?

    var distance = response.rows[0].elements[0].distance.text;
    var duration = response.rows[0].elements[0].duration.value;
    var dvDistance = document.getElementById("dvDistance");
    duration = parseFloat(duration / 60).toFixed(2);
    dvDistance.innerHTML = "";
    dvDistance.innerHTML += "Distance: " + distance + "<br />";
    dvDistance.innerHTML += "Time:" + duration + " min";

This is how I call it but while I tried with <input> I couldn't show up result.

    <div id="dvDistance"></div>
Solution

  • An HTML Input doesn't have .innerHTML, it uses .value for the text. Change the .innerHTML to .value and remove the HTML tags from the string.

    resulting output

    code snippet:

    var distance = 20
var duration = 60
var dvDistance = document.getElementById("dvDistance");
duration = parseFloat(duration / 60).toFixed(2);
dvDistance.value = "";
dvDistance.value += "Distance: " + distance + " ";
dvDistance.value += "Time: " + duration + " min";
    <input id="dvDistance" size="30" />