Я рассчитал расстояние и время в innerHTML, и я не могу передать его, используя идентификатор в текстовом поле.Как я могу это исправить?

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

Вы можете установить свойство border и width для div в CSS, чтобы добавить рамку вокруг него.

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 2

Ввод HTML не имеет .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" />

Answer 3

Похоже, третья строка должна быть var dvDistance = document.getElementById("#dvDistance");