Member Avatar for mitch.hendrix.73

I am trying to figure out how to have 2 spans combine information to output on screen.
I get parts of the output correct, but i can't find where to put the added text from the second span to complete it properly. I've moved the 0 mi), around but cannot get it to come up when the # of miles is presented to the screen. My output is "Asian Art Museum (3486.4 I cannot get the mi) to add the the output.

      <li><a href="http://www.asianart.org/" target="_blank">Asian Art Museum</a><span id="geo1"> (</span><span id="distance1"> 0 mi)</span></li>
      <li><a href="http://bit.ly/93E5VI" target="_blank">City Hall</a><span id="geo2"> (</span><span id="distance2"> 0 mi)</span></li>
      <li><a href="http://heartofthecity-farmersmar.squarespace.com/" target="_blank">Heart of the City Farmer's Market</a><span id="geo3"> (</span><span id="distance3"> 0 mi)</span></li>
      <li><a href="http://www.sfcablecar.com/" target="_blank">Cable Car turnaround</a><span id="geo4"> (</span><span id="distance4"> 0 mi)</span></li>
      <li><a href="http://www.flysfo.com/" target="_blank">San Fran Int'l Airport</a><span id="geo5"> (</span><span id="distance5"> 0 mi)</span></li>
  • 2 Contributors
  • 3 Replies
  • 127 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

pointed the thread in the right direction — the markup was the real culprit. Splitting the numeric value from its surrounding characters makes client-side updates reliable, and resolved it by separating those pieces. Below are a few practical, safe patterns and small checks that reduce fragility for this kind of inline output.

Keep markup minimal and use a data attribute (or a class) for the numeric value, then let CSS add the purely visual parts (parentheses/unit). This keeps the DOM node containing only the text you replace and avoids accidentally overwriting surrounding text.

<li>
  <a href="#">Asian Art Museum</a>
  <span class="distance" data-distance="3486.4" aria-label="3486.4 miles"></span>
</li>
.distance::before { content: " ("; }
.distance::after  { content: " mi)"; }

Update all distances with a small script that reads the data attribute, formats the number, and writes the plain text into the node. Use textContent (not innerHTML) and a proper formatter for rounding/localization.

var fmt = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
document.querySelectorAll('.distance').forEach(function(el){
  var v = Number(el.dataset.distance);
  if (!isFinite(v)) { el.textContent = '—'; return; }
  el.textContent = fmt.format(v);
  el.setAttribute('aria-label', fmt.format(v) + ' miles');
});

Quick troubleshooting and best practices: run scripts after DOM load (use defer or DOMContentLoaded), avoid duplicate IDs (use classes/data-*), keep units/punctuation out of the updatable element for easier updates, and add an aria-label or hidden text if you rely on CSS-generated content for visual units (pseudo-elements are not read by most screen readers).

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Are you trying to update the value client side? If so, you can use some javascript. here is an example...

<li>
    <a href="#" >Asian Art Museum</a> ( <span id="distance1">0</span> mi )
</li>

<script>
    var dist1 = document.getElementById("distance1")
    dist1.innerText = 3486.4
</script>
Member Avatar for mitch.hendrix.73

Yeah, thank you, i can see it now. I was confused and had the 0 mi) all together, instead of spreading it out properly in my inline statement.

Member Avatar for JorgeM

So has this info solved your issue or do you need more assistance?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.