JavaScript实现地理定位文本转可点击新窗口链接问题咨询

Let's tackle the two problems you're facing with your emergency list code: the "Name" field showing undefined and the non-clickable geolocation links, step by step.

1. Fixing the "Name: undefined" Problem #

The undefined shows up because either the user object or fullname property is missing from your document data, or you're accessing it without handling missing values. To fix this gracefully (and avoid breaking the UI), use optional chaining (?.) and nullish coalescing (??) to set a fallback value when data is missing:

// Replace your original name line with this
const fullName = doc.data()?.user?.fullname ?? "Unknown User";
name.textContent = `Name: ${fullName}`;

This way, if user or fullname doesn't exist in your data, it'll display "Unknown User" instead of undefined.

2. Making Geolocation Links Clickable #

Right now, your <a> tag for geolocation doesn't have a valid href attribute, and the click event uses an undefined variable geo_point. Let's fix this using native HTML link behavior:

Step 1: Set the link attributes properly #

Instead of relying on a click listener, use the <a> tag's built-in functionality. Set its href to the Google Maps URL and target="_blank" to open it in a new window:

// Replace your original geoloc line with these
const geoPoint = doc.data().geo_point;
const mapUrl = `https://www.google.com/maps/place/${geoPoint}`;
geoloc.href = mapUrl;
geoloc.target = "_blank";
geoloc.textContent = `Geo Location: ${geoPoint}`;

Step 2: Remove the unnecessary click listener #

Since we're using the <a> tag's native behavior, you can delete this redundant code block:

// Delete this part
geoloc.addEventListener('click', function() {
  window.open(geo_point);
})

3. Fix Invalid HTML Markup #

Your HTML has a mistake: you wrapped a <ul> tag inside an <a> tag, which is invalid. Correct it to this:

<div id="content" class="content">
  <ul id="emergency-list">
    <!-- JS will insert list items here -->
  </ul>
  <a href="" id="mylink">Geolocation</a>
</div>

Full Corrected JavaScript Code #

Here's the complete, fixed version of your function:

const emergencyList = document.querySelector('#emergency-list');
const form = document.querySelector('#add-form');

function renderEmergencyList(doc) {
  let li = document.createElement('li');
  let name = document.createElement('span');
  let accidenttype = document.createElement('span');
  let geoloc = document.createElement('a');
  let cross = document.createElement('div');

  li.setAttribute('data-id', doc.id);

  // Fixed Name field with fallback
  const fullName = doc.data()?.user?.fullname ?? "Unknown User";
  name.textContent = `Name: ${fullName}`;

  accidenttype.textContent = `Accident Type: ${doc.data().accident_type}`;

  // Fixed clickable geolocation link
  const geoPoint = doc.data().geo_point;
  const mapUrl = `https://www.google.com/maps/place/${geoPoint}`;
  geoloc.href = mapUrl;
  geoloc.target = "_blank";
  geoloc.textContent = `Geo Location: ${geoPoint}`;

  cross.textContent = 'x';

  li.appendChild(name);
  li.appendChild(accidenttype);
  li.appendChild(geoloc);
  li.appendChild(cross);
  emergencyList.appendChild(li);

  // Delete functionality (unchanged)
  cross.addEventListener('click', (e) => {
    e.stopPropagation();
    let id = e.target.parentElement.getAttribute('data-id');
    db.collection('Emergency Message').doc(id).delete();
  });
}

Quick Recap #

• Always add fallbacks when accessing nested data to avoid undefined in the UI.
• Use native HTML features (like <a> for links) instead of reinventing behavior with event listeners when possible.
• Double-check your HTML structure for invalid nesting—it can cause unexpected rendering bugs.

内容的提问来源于stack exchange，提问作者chineko henson