What is a promise in Javascript?

Question

Fernanda

Asked: 2020-02-26 12:28:17 +0800 CST 2020-02-26 12:28:17 +0800 CST 2020-02-26 12:28:17 +0800 CST

How can the "ID" be identified from where an onclick is being performed?

772

I have several buttons in a menu that should display information with a tab down (each individually its own). Since they all do the same thing, create a function (with .toggle) to add and remove a class and

function desplegar() {
  document.getElementById("meta").classList.toggle("mostrar"),
    document.getElementById("responsive").classList.toggle("mostrar");
}
/*
var opciones =["meta","responsive","catalogo","tienda","blog","diseno","planes"];

function desplegar(){
  
  (no se como seria la identificacion del # donde se cliqueo????').classList.toggle("mostrar");
}*/

main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}

<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar()">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar()">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

change the display from none to block. so far we're doing fine. The problem is that they all respond to the same function, so all the tabs are displayed simultaneously (it doesn't matter which button you click)...

I want to make an array so that the ID of the button that was clicked is identified and only executes the function on that specific id. Could you help me with the part of identifying the id where it is pressed. I pass code to guide them. If anyone knows a better way to achieve what I need, it will be well received. Thank you very much.

4 Answers

Voted

alanfcm · Answer 1 · 2020-02-26T13:05:39+08:00

If you use jQuery it's super easy. To prevent the page from loading, you can use a CDN as in the following example:

function desplegar(elemento) {
  $(elemento).next('div').toggleClass("mostrar")  
}

main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}

/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar(this)">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar(this)">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

Juan Pablo · Answer 2 · 2020-02-26T12:52:18+08:00

Juan Pablo

2020-02-26T12:52:18+08:002020-02-26T12:52:18+08:00

in your js you must use this function in the document.ready

$("#ID_BOTON").click(function(){
    TUFUNCION();
});

2

Fernanda · Answer 3 · 2020-03-12T10:32:48+08:00

Best Answer

Fernanda

2020-03-12T10:32:48+08:002020-03-12T10:32:48+08:00

I got what you are looking for with a fairly simple but effective code. I'll pass it along in case anyone else needs to. Cheers

//despliega info de cada seccion en los botones del menu del index
function desplegar(elemento) {
    $(elemento).next('div').toggle();
    $(".introMenu").not($(elemento).next('div')).hide();
}

1

Bryro · Answer 4 · 2020-03-12T11:07:46+08:00

You just have to pass the function to the this example function:desplegar(this)

function desplegar(e){
console.log(e);
}

    main #seccion {
      margin-bottom: 190px;
      margin-top: 10px;
      position: relative;
      top: 0px;
    }

    main #seccion.sinFooter {
      margin-bottom: 40px;
      top: 250px;
    }


    /*--boton principal de cada seccion--*/

    main nav ol li {
      list-style: none;
    }

    main nav ol li h2 {
      background: #e6e6e6;
      display: block;
      width: 100%;
      padding: 15px 0;
      text-align: center;
      color: #0199f5;
      font-family: 'EncodeThin';
      font-size: 1.2em;
      cursor: pointer;
      border-bottom: 1px solid #d2d3d5;
      overflow: hidden;
    }

    main nav ol li h2:before {
      font-family: 'icomoon';
      content: '\ea0a';
      font-size: .5em;
      position: relative;
      left: -5px;
      top: -3px;
    }

    main nav ol li h2:hover {
      color: #fbd30c;
      background: #666;
    }


    /*--desplegable de cada seccion--*/

    main nav ol li div.introMenu {
      font-size: .8em;
      display: none;
    }

    main nav ol li div a {
      width: 100%;
      height: auto;
      padding: 15px 30px;
      cursor: pointer;
      text-align: left;
      color: #000;
    }


    /*--titulo desplegable--*/

    main nav ol li div h3 {
      padding: 3px 0;
    }


    /*--texto desplegable--*/

    main nav ol li div p {
      padding: 5px 0;
    }


    /*--boton ver mas desplegable--*/

    main nav ol li div h4 {
      padding: 5px;
      color: #b5de0a;
      position: relative;
      float: right;
      margin-bottom: 10px;
    }


    /*--estilo de display para onclick--*/

    main nav ol li div#meta.mostrar {
      display: block;
    }

    main nav ol li div#responsive.mostrar {
      display: block;
    }

    main nav ol li div#catalogo.mostrar {
      display: block;
    }

    main nav ol li div#tienda.mostrar {
      display: block;
    }

    main nav ol li div#blog.mostrar {
      display: block;
    }

    main nav ol li div#diseno.mostrar {
      display: block;
    }

    main nav ol li div#precios.mostrar {
      display: block;
    }

<main>
      <nav id="seccion">
        <ol>
          <li>
            <h2 onClick="desplegar(this)">Que hacemos?</h2>
            <div class="introMenu" id='meta'>
              <a href="nuestra_meta.php">
                <h3>No sabes por donde empezar...</h3>
                <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2 onClick="desplegar(this)">Diseños adaptables</h2>
            <div class="introMenu" id='responsive'>
              <a href="diseno_responsive.php">
                <h3>Nuevas formas de conectarse...</h3>
                <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
        </ol>
      </nav>
    </main>

How can the "ID" be identified from where an onclick is being performed?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?