动态按钮链接集成教程：解决HTML与JavaScript交互问题

<div class="info-container">
    <div class="horario-info">
        <h6 id="horario-label"></h6>
        <p id="horario-descripcion"></p>
    </div>
    <!-- 新增的电话信息显示元素 -->
    <div class="telefono-info">
        <h6 id="tel-label"></h6> <!-- 注意这里改为h6，与horario-label保持一致 -->
        <p id="tel-descripcion"></p>
    </div>
</div>

window.addEventListener('DOMContentLoaded', function () {
    var queryParams = new URLSearchParams(window.location.search);
    var comercioId = queryParams.get('comercios');

    var comercios = [
        {
            id: '1',
            titulo: 'Monkys Fruz',
            descripcion: 'Descubre nuestra heladería de soft ice cream y frozen yogurt, donde encontrarás una amplia selección de sabores deliciosos y toppings coloridos para endulzar tu día. Sumérgete en una experiencia llena de sabor y disfruta de nuestros suaves y cremosos helados, listos para satisfacer tus antojos más dulces. Ven y déjate cautivar por nuestras creaciones refrescantes y llenas de alegría.',
            imagen: '../images/index/MONKYFRUZ-01.png',
            fondo: '../images/comercios/monkys.svg',
            horario: 'Lunes a viernes de 8 a 10',
            tel: '86622488',
            facebook: '',
            instagram: 'https://www.instagram.com/josephcarazo/',
        },
        {
            id: '2',
            titulo: 'Monter',
            descripcion: 'Descripción del comercio 2',
            imagen: 'ruta/imagen-comercio2.jpg',
            fondo: 'ruta/fondo-comercio2.png',
            horario: '',
            tel: '',
            facebook: '',
            instagram: '',
        },
    ];

    var comercio = comercios.find(function (c) {
        return c.id === comercioId;
    });

    // 辅助函数：在新标签页中打开URL
    function openInNewTab(url) {
        const win = window.open(url, '_blank');
        if (win) { // 检查是否成功打开新窗口，防止被浏览器拦截
            win.focus();
        } else {
            // 可以添加用户提示，例如：alert('请允许弹出窗口以便打开链接。');
        }
    }

    if (comercio) {
        document.getElementById('comercio-titulo').textContent = comercio.titulo;
        document.getElementById('comercio-descripcion').textContent = comercio.descripcion;
        document.getElementById('comercio-imagen').src = comercio.imagen;
        document.body.style.backgroundImage = 'url(' + comercio.fondo + ')';

        var horarioLabelElement = document.getElementById('horario-label');
        horarioLabelElement.textContent = 'Horario:';
        horarioLabelElement.classList.add('label-style');

        var horarioDescripcionElement = document.getElementById('horario-descripcion');
        horarioDescripcionElement.textContent = comercio.horario;
        horarioDescripcionElement.classList.add('info-style');

        // 获取并设置电话信息（现在HTML中已存在这些元素）
        var telefonoLabelElement = document.getElementById('tel-label');
        if (telefonoLabelElement) { // 添加null检查，确保元素存在
            telefonoLabelElement.textContent = '电话:';
            telefonoLabelElement.classList.add('label-style');
        }

        var telefonoDescripcionElement = document.getElementById('tel-descripcion');
        if (telefonoDescripcionElement) { // 添加null检查
            // 直接将电话号码包装成可点击的tel链接
            telefonoDescripcionElement.innerHTML = '<a href="tel:' + comercio.tel + '">' + comercio.tel + '</a>';
            telefonoDescripcionElement.classList.add('info-style');
        }


        var instagramCard = document.querySelector('.card1');
        if (comercio.instagram && instagramCard) { // 添加null检查
            instagramCard.addEventListener('click', function () {
                openInNewTab(comercio.instagram);
            });
        }

        var facebookCard = document.querySelector('.card2');
        if (comercio.facebook && facebookCard) { // 添加null检查
            facebookCard.addEventListener('click', function () {
                openInNewTab(comercio.facebook);
            });
        }

        var telefonoCard = document.querySelector('.card3');
        if (comercio.tel && telefonoCard) { // 添加null检查
            telefonoCard.addEventListener('click', function () {
                // 对于电话按钮，直接通过window.location.href触发拨号
                window.location.href = 'tel:' + comercio.tel;
            });
        }
    } else {
        document.body.innerHTML = '<h1>Comercio no encontrado</h1>';
    }
});

<main>
    <h1 id="comercio-titulo"></h1>
    <div class="comercio-container">
        <img id="comercio-imagen" src="" alt="Imagen del comercio">
        <hr style="color: #fff; border: 2px solid white;">
        <p id="comercio-descripcion"></p>
        <hr style="color: #fff; border: 2px solid white;">
    </div>

    <h4 id="comercio-informacion-titulo" class="info-titulo">INFORMACIÓN</h4>
    <div class="info-container">
        <div class="horario-info">
            <h6 id="horario-label"></h6>
            <p id="horario-descripcion"></p>
        </div>
        <!-- 新增的电话信息显示元素 -->
        <div class="telefono-info">
            <h6 id="tel-label"></h6>
            <p id="tel-descripcion"></p>
        </div>
    </div>

    <div class="main">
        <div class="up">
            <button class="card1">
                <i class="fab fa-instagram instagram" aria-hidden="true"></i>
            </button>
            <button class="card2">
                <i class="fab fa-facebook facebook" aria-hidden="true"></i>
            </button>
        </div>
        <div class="down">
            <button class="card3">
                <i class="fas fa-phone-alt" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</main>