我已经在 innerHTML 中计算了距离和时间，但无法使用文本框中的 id 传递它。我该如何解决？

Question

我正在 innerHTML 字段中设置时间和距离，但我想在文本框中显示它。我是 javascript 的新手，虽然 innerHTML 工作正常，但我认为最好在框中显示此信息。有什么想法吗？

    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";

我是这样称呼它的，但是当我尝试使用 <input> 时，我无法显示结果。

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

Answer 1

看起来第三行应该是 var dvDistance = document.getElementById("#dvDistance");

Answer 2

您可以设置 CSS 中 div 的边框和宽度属性以在其周围添加一个框。

var distance = 20
var duration = 60
var dvDistance = document.getElementById("dvDistance");
duration = parseFloat(duration / 60).toFixed(2);
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Time: " + duration + " min";

.box {
  border: 1px solid black;
  width: 7em;
}

<div id="dvDistance" class="box"></div>

希望这对您有所帮助。

Answer 3

一个 HTML Input 没有 .innerHTML，它使用 .value 作为文本。将 .innerHTML 更改为 .value 并从字符串中删除 HTML 标签。

代码片段：

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" />

我已经在 innerHTML 中计算了距离和时间，但无法使用文本框中的 id 传递它。我该如何解决？

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?

javascript

google-maps

textbox

innerhtml