0

Quiero ejecutar una función a través de distintos eventos onclick apilados en un documento html pero al momento de llamar al primero y cerrar; el segundo ejecuta lo del primero y el tercero de la misma manera... así sucesivamente. Lo que debería hacer es que cada evento onclick ejecute por medio de la misma función otro contenido.

este es mi codigo JavasCript

<script type="text/javascript">
        function mapShow(evt, infoName) {
            var i, x, tablinks;
            x = document.getElementsByClassName("info");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
          }
          tablinks = document.getElementsByClassName("tablink");
          for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace("text-success", "");
          }
      
        document.getElementById(infoName).style.display = "block";
            evt.currentTarget.firstElementChild.className += " text-success";
        }
        
        var cont = 0;
        function cerrarIframe() {
            if (cont < 1) return mapShow();     
            cont++;
        }
    </script>

y estos son los eventos onclick:

<!--PRIMER EVENTO:--------------------->
<ul>
<a href="javascript:void(0)" onclick="mapShow(event, 'map1');" type="button" class="btn btn-link">
    <li class="tablink">Sucursal 1 <small>algo q mostrar</small></li></a>
</ul>
<div id="map1" class="row btn001 info">
    <div class="col-sm-9 ratio ratio-21x9"><iframe>de google maps</iframe></div>
</div>
<!----------------------------------->

<!--SEGUNDO EVENTO:-------------------->
<ul>
<a href="javascript:void(0)" onclick="mapShow(event, 'map1');" type="button" class="btn btn-link">
    <li class="tablink">Sucursal 1 <small>otra cosa q mostrar</small></li></a>
</ul>
<div id="map1" class="row btn001 info">
    <div class="col-sm-9 ratio ratio-21x9"><iframe>de google maps</iframe></div>
</div>
<!----------------------------------->
<!--y asi susecivamente-->

He intentado asignar nuevo nombre a la función para cada evento onclick pero no funciona entre otras cosas... Agradezco su ayuda

2
  • No entiendo lo que preguntas. ¿Puedes intentar explicarlo mejor?
    – masterguru
    Commented el 15 mar. 2022 a las 14:21
  • claro que si... Lo que requiero es mostrar mapas de ubicación geográfica insertos como iframe en un div el cual posee un evento onclick para que por medio de él pueda mostrarlos en pantalla haciendo uso de la función mapShow que he creado. Lo que pasa es que dentro del Document hay más divs con otros mapas y la función solo ejecuta lo que por orden ejecuta html5 es decir de arriba hacia abajo lo que está primero en la fila... los div siguientes ejecutan la función del primero... espero haber sido más claro gracias
    – Omar Meza
    Commented el 15 mar. 2022 a las 16:28

2 respuestas 2

1

Si quieres realizar diferentes operaciones con la misma function, una solucion podria ser pasar como parametro la opción que quieres realizar como se ve en el siguiente ejemplo:

const myFunction = (option, e, infoName) => {
  switch (option) {
    case 1:
      console.log('📑 Option 1');
      // code ...
      break;
    case 2:
      console.log('📑 Option 2');
      // code ...
      break;
    default:
      break;
  }
};
<button onclick="myFunction(1,event, 'info')">Option 1</button>
<button onclick="myFunction(2,event, 'info')">Option 2</button>

1

en vez de usar el onclick inline deberias hacerlo de esta manera:

document.addEventListener('click', mapShow);

la funcion mapShow deberia recibir el disparador del evento: mapShow(e), en ese evento (target) puedes sacar los parametros que necesites.

mapShow(e){
//....codigo de la funcion ....
}

Luego que la funcion se ejecute si sigues teniendo problemas debes destruir el listener: e.target.removeEventListener('click', mapShow, true)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.