Thiết kế website giá rẻ

Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tu Sitio</title>
    <link rel="stylesheet" type="text/css" href="paginaUsuarioServicio.css" />
  </head>
  <body>
    <nav>
      <a href="paginaPrincipalUsuario.html">Bienvenida</a>
      <a href="paginaUsuarioMascotas.html">Tu Mascota</a>
      <a href="paginaUsuariosServicio.html">Servicios</a>
      <a href="paginaUsuarioAgregar.html">Agregar Mascota</a>
      <a href="login.html">Cerrar Sesión</a>
    </nav>

    <div class="content-wrapper">
      <div id="map"></div>
      <div id="dataContainer">
        <p id="TiendasVinculadas">Tiendas Vinculadas</p>
      </div>
    </div>

    <div class="chat-popup" id="myForm">
      <form class="form-container" action="#">
        <h1 style="color: #5d17cf">Chat</h1>
        <textarea
          placeholder="Escriba su mensaje..."
          name="msg"
          required
        ></textarea>

        <button type="submit" class="btn">Enviar</button>
        <button type="button" name="btn cancel" onclick="closeForm()">
          Cerrar
        </button>
      </form>
    </div>

    <script type="module" src="/dist/paginaUsuarioServicio.js"></script>
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC35PzW6PQFnxZAzYMX3yI7ubIxaJEJd7E&libraries=places&callback=initMap"
    ></script>
  </body>
</html>

I have this HTML

import { getDocs, getDoc, query, collection, doc, where} from 'firebase/firestore';
import { db } from './index.js';

function openForm(){
    document.getElementById("myForm").style.display="block";
}
function closeForm(){
    document.getElementById("myForm").style.display="none";
}

document.addEventListener('DOMContentLoaded', async () => {
    openForm();
    const urlParams = new URLSearchParams(window.location.search);
    const additionalData = urlParams.get('data');
    const navLinks = document.querySelectorAll('nav a');
    const verButtons = document.querySelectorAll('.ver-button');


    navLinks.forEach(link => {
        const linkUrl = link.getAttribute('href');

        if (link.textContent.toLowerCase() !== 'cerrar sesión') {
            const separator = linkUrl.includes('?') ? '&' : '?';
            link.setAttribute('href', `${linkUrl}${separator}data=${additionalData}`);
        }
    });


    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            position => {
                const userLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                initMap(userLocation);
                addPetPlaces(userLocation);
            },
            error => {
                console.error('Error obteniendo la ubicación:', error.message);
                initMap({ lat: -34.397, lng: 150.644 });
            }
        );
    } else {
        console.error('Geolocalización no es compatible en este navegador.');
        initMap({ lat: -34.397, lng: 150.644 });
    }

    const usuariosCollection = collection(db, 'Usuarios');
    const queryUsuarios = query(usuariosCollection, where('rol', '==', 'DueñoServicio'));

    try {
        const usuariosSnapshot = await getDocs(queryUsuarios);

        for (const usuarioDoc of usuariosSnapshot.docs) {
            const usuarioData = usuarioDoc.data();
            const usuarioId = usuarioDoc.id;

            const usuarioDocRef = doc(usuariosCollection, usuarioId);
            const usuarioDocSnapshot = await getDoc(usuarioDocRef);

            if (usuarioDocSnapshot.exists()) {
                const usuarioInfo = usuarioDocSnapshot.data();

                const tiendasCollection = collection(usuariosCollection, usuarioId, 'Tiendas');
                const tiendasSnapshot = await getDocs(tiendasCollection);

                tiendasSnapshot.forEach(tiendaDoc => {
                    const tiendaData = tiendaDoc.data();
                    const nombreTienda = tiendaData.nombre;


                    const contenidoHTML = `
            <div class="tienda-box">
                <h3>${nombreTienda}</h3>
                <p>Nombre: ${usuarioInfo.Nombre} ${usuarioInfo.Apellido}</p>
                <p>Servicio Tienda: ${usuarioInfo.ServicioTienda}</p>   
                <p>Correo: ${usuarioInfo.correo}</p>      
                <button id = "open" onClick="openForm()">Mensaje</button>
                <button onclick="verUbicacion('${nombreTienda}')">Ubicación</button>
        </div>      
                    `;
                    dataContainer.innerHTML += contenidoHTML;
                });
            }
        }
    } catch (error) {
        console.error('Error al obtener datos de las tiendas:', error);
    }
});

let map;

function initMap(userLocation) {
    map = new google.maps.Map(document.getElementById('map'), {
        center: userLocation,
        zoom: 15,
    });
}
function addPetPlaces(userLocation) {
    const request = {
        location: userLocation,
        radius: 5000, 
        type: ['pet_store']
    };

    const placesService = new google.maps.places.PlacesService(map);

    placesService.nearbySearch(request, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (const place of results) {
                const marker = new google.maps.Marker({
                    position: place.geometry.location,
                    map: map,
                    title: place.name
                });
            }
        }
    });
}

function verUbicacion(nombreTienda) {

    console.log(`Ver ubicación de ${nombreTienda}`);
}

and this js, the problem is, that I want to do a popup, but the buttons doesn’t recognize the functions to open and close the chat and in console it shows this exception :Uncaught ReferenceError: closeForm is not defined at HTMLButtonElement.onclick (paginaUsuariosServicio.htmldata=Usuario1:35:71) in both cases

Thiết kế website giá rẻ

Danh mục

Button doesn’t recognize functions