Question

所以我允许用户输入两个位置：

输入字段的HTML：

<input type="text" id="address1" placeholder="" />
<label>
  <span>Pickup Address:</span>
</label>

<input type="text" id="address2" placeholder="" onfocusout="GetRoute()" />
<label>
  <span>Dropoff Address:</span>
</label>

然后它会显示一个div，其中包含两个距离之间的精确英里数，以及在第二个地址字段退出后调用jQuery的.focusout（）时应该采用的总分钟数。

对应的HTML：

<div class="container-fluid" id="dv">
   <div id="dvMap"></div>

   <div class="row">
      <div id="dvDistance">
        <h3 id="miles">0</h3>
        <h6>Over Miles</h6>
      </div>

      <div id="dvDistance">
        <h3 id="time">0</h3>
        <h6>Overall Time</h6>
      </div>
   </div>
</div>

最初隐藏div和值，直到调用focusout。现在一切正常，直到我想更新h2标签的初始值。你看，我遇到的问题是，在调用focusout之后，我无法将h2标签的over值与更新值连接起来。当我通过警报调用值时，它给了我undefined。这就是我想要更新的内容：

HTML：

<div class="text-center">
  <h2>Total amount $<span id="new_text">35</span></h2>
</div>

最后，这是我的 JS和jQuery ：

$("#address2").focusout(function() {
  $("#dv").slideDown("slow", function() {
    document.getElementById('dv').style.display = "block";
  });
  doSomething();
});

function doSomething() {
  var overallMiles = document.getElementById('miles').innerText;
  var overallMins = document.getElementById('time');

  alert(overallMiles);
  // alert(overallMins);

  document.getElementById("new_text").innerHTML = 35 + Number(overallMiles) + Number(overallMins);
}

GetRoute的一部分：

  //*********DISTANCE AND DURATION**********************//
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [source],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
      var distance = response.rows[0].elements[0].distance.text;
      var duration = response.rows[0].elements[0].duration.text;
      var dvMiles = document.getElementById("miles");
      var dvTime = document.getElementById("time");

      dvMiles.innerHTML = distance;
      dvTime.innerHTML = duration;

    } else {
      alert("Unable to find the distance via road.");
    }
  });
}

我不想要这个值：

非常感谢任何帮助！

Answer 1

您在以下代码行中缺少.innerText

var overallMins = document.getElementById('time');因此，在添加它们时会得到NaN。不确定你的要求是什么，但你没有改变它的价值 <h3 id="miles">0</h3>和<h3 id="time">0</h3>。

以下代码适用于我

$("#address2").focusout(function() {
  $("#dv").slideDown("slow", function() {
    document.getElementById('dv').style.display = "block";
  });
  doSomething();
});

function doSomething() {
  var overallMiles = document.getElementById('miles').innerText;
  var overallMins = document.getElementById('time').innerText;

  alert(overallMiles);
  // alert(overallMins);

  document.getElementById("new_text").innerHTML = 35 + Number(overallMiles) + Number(overallMins);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="address1" placeholder="" />
<label>
  <span>Pickup Address:</span>
</label>

<input type="text" id="address2" placeholder="" />
<label>
  <span>Dropoff Address:</span>
</label>

<div class="container-fluid" id="dv">
   <div id="dvMap"></div>

   <div class="row">
      <div id="dvDistance">
        <h3 id="miles">0</h3>
        <h6>Over Miles</h6>
      </div>

      <div id="dvDistance">
        <h3 id="time">0</h3>
        <h6>Overall Time</h6>
      </div>
   </div>
</div>

<div class="text-center">
  <h2>Total amount $<span id="new_text">35</span></h2>
</div>

Answer 2

你是不是想从文本中获取一个数字＆＃39; 30 mi＆＃39;和＆＃39; 29分钟＆＃39;？这给了NaN。

您可以通过JavaScript get number from string

这样复杂的方式从这些字符串中获取数字

但更容易的是将里程和分钟传递给变速箱。或者为数字和字符串制作两个单独的跨度。像

这样的东西

<h3><span id="miles">30</span> mi.</h3>

根据用户输入信息更新H2标签

2 个答案: