Updating an H2 tag upon user input information

Question

So I'm allowing a user to input two locations:

HTML for input fields:

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

Which then shows them a div with the exact miles between the two distances and the overall minutes it should take once jQuery's .focusout() has been called with the exit of the second address field.

Corresponding 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>

The div and the values are initially hidden until focusout is called. Now everything works correctly until I want to update the initial value of an h2 tag. You see, the problem I'm running into is that I'm not able to concatenate the over value of the h2 tag with the update values after focusout has been called. It's giving me undefined when I call on the value with alert. This is what I'm trying to update:

HTML:

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

And lastly, here's my JS and 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);
}

A portion of 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.");
    }
  });
}

I'm not wanting this value:

Any help is greatly appreciated!

It's only getting the innerText of the previous value of 0 rather than the updated value. — mur7ay, Sep 27 '17 at 18:22
you are calling `GetRoute()` also on focusout of `#address2` in code below `onfocusout="GetRoute()"` . Are you sure about this? — Niladri, Sep 27 '17 at 18:30
?? what are you trying to do ? html + js + question are confusing :( Can you clarify if anyting is working and what goes wrong exactly ? — G-Cyrillus, Sep 27 '17 at 18:33
Yeah, the GetRoute() is what is actually calculating the distance and overall time so I'm able to display the values like above and then I initially would have a div slide down displaying the map with the calculated values. Therefore, I felt it was necessary to place the additional code within the focusout function. — mur7ay, Sep 27 '17 at 18:34
@mur7ay if you are doing this `$("#address2").focusout(function() {` then not required do inline `onfocusout="GetRoute()"` — Niladri, Sep 27 '17 at 18:36
Oh, I see what you're saying. Then it is indeed being called twice on address2. — mur7ay, Sep 27 '17 at 18:44
?? to add each value in doSomething() with my poor js skills and at debug/sorting out level i would do something alike: `function doSomething() { var overallMiles = document.getElementById('miles').innerText; var overallMins = document.getElementById('time').innerText; var ttl1= Number(document.getElementById("new_text").innerText); var ttl2= Number(overallMiles); var ttl3= Number(overallMins); document.getElementById("new_text").innerHTML = ttl1 + ttl2 + ttl3 }` for the rest of the logic i am still confused. — G-Cyrillus, Sep 27 '17 at 18:45
Actually, the alert shows the value of 0, but the span h2 value is changed to NaN — mur7ay, Sep 27 '17 at 18:46
@mur7ay check my answer , you are missing a `.innerText` on `var overallMins = document.getElementById('time');` — Niladri, Sep 27 '17 at 18:48
its actually missing a few thing, see my comment and answer about innertext .... — G-Cyrillus, Sep 27 '17 at 18:48
I've added innertext to the 'time' but it's currently not adding the updated values together still. I'm still reading over the answers. — mur7ay, Sep 27 '17 at 18:53
@mur7ay i already said you are not updating any value in your code. what values you want to be updated? — Niladri, Sep 27 '17 at 18:54

score 2 · Accepted Answer · answered Sep 27 '17 at 18:47

You were missing .innerText in the below line of code

var overallMins = document.getElementById('time'); as a result you would get NaN when adding them up. Not sure what was your requirement but you are not changing the value of <h3 id="miles">0</h3> and <h3 id="time">0</h3> anywhere in your code.

The below code works for me

$("#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>

I've updated my question with a portion of GetRoute which is updating the time and miles. — mur7ay, Sep 27 '17 at 18:56
@mur7ay when is this service called ? is it before calculating the sum? `var service = new google.maps.DistanceMatrixService();` — Niladri, Sep 27 '17 at 19:04
if it's async then when the sum is done at that moment the updated value may not available. Also try using `dvMiles.innerText` instead of innerHTML. — Niladri, Sep 27 '17 at 19:05
Yeah, that's what I'm thinking. Because when I use alert for the value for overallMiles, it's still showing 0 rather than 30 for the miles. — mur7ay, Sep 27 '17 at 19:09
it's better to call the calculation after the response come back from the service in the callback. — Niladri, Sep 27 '17 at 19:10

score 0 · Answer 2 · answered Sep 27 '17 at 18:49

0

Could it be you are trying to get a number from the text '30 mi' and '29 min'? This gives NaN.

You could get the numbers from this strings in a complicated way like JavaScript get number from string

But easier would it be to pass the miles and the minutes in a var. Or make two seperate spans for the numer and the string. Something like

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

answered Sep 27 '17 at 18:49

Hans Dash

761
4
18

That's correct. I'm ultimately trying to add the '30' from mi and '29' from mins to the initial total of $35 after focusout. – mur7ay Sep 27 '17 at 18:58
maybe it would be easier to use distance.value from the response instead of distance.text. You only need to make miles from the meters. For example: overallMiles= 0.000621371192*response.rows[0].elements[0].distance.value same for the time: overallMins=response.rows[0].elements[0].duration.value/60 – Hans Dash Sep 28 '17 at 20:19

Updating an H2 tag upon user input information

2 Answers2