Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

106
Visualizações
Dropdown on click doing nothing

I am just starting JS, so this may be a stupid question. I want to make a dropdown, where if you pick one option the related paragraph would be visible. I didn't really know how to start this so I created the cars function to make the "e38value" paragraph visible when clicking the e38 button, but nothing happens when I click on it, and I have no clue why. If someone knows a better way doing this and it is not so complicated and a beginner could understand it I would be very happy if you could share it with me.

var e38 = document.querySelectorAll('e38value')

function cars() {
  document.querySelectorAll('e38').onclick = function() {
    console.log('clicked');
    e38.classList.toggle("e38hidden");
  }
}
.e38hidden {
  display: none;
}
<nav>
  <menu>
    <menuitem id="kocsid">
    <a>Amilyen kocsid van</a>
    <menu>
      <menuitem id="Audi">
      <a>Audi</a>
      <menu>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
      </menu>
      </menuitem>
      <menuitem id="BMW">
      <a>BMW</a>
      <menu>
        <menuitem><a class="e38">750 e38</a></menuitem>
        <menuitem><a>760 e65</a></menuitem>
        <menuitem><a>M3 e46</a></menuitem>
        <menuitem><a>M3 e62</a></menuitem>
      </menu>
      </menuitem>
      <menuitem id="Dodge">
      <a>Dodge</a>
      <menu>
        <menuitem onclick=""><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
      </menu>
      </menuitem>
</nav>
<p id="e38value" class="e38hidden">e38 value</p>

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

there are probably other better ways to acomplish that but here is how to fix you script:

function cars() {
  document.querySelectorAll('.e38').forEach(function(e) {
    e.onclick = function(evt) {
      console.log('clicked', evt.target.innerHTML);
      document.getElementById("e38value").classList.toggle("e38hidden");
    }
  })
}

cars();

Note:

  1. You need to call cars() to actually initialise the events.
  2. The selector should be ".e38" which means all elements with the e38 class
  3. You need to call forEach as the querySelector returns an array of elements (in that case with only one element)
  4. The click event can be used to locate the target (where it was clicked).

Here is a fiddle: https://jsfiddle.net/b9728Lmk/1/

Does that solve the problem?

about 4 years ago · Santiago Trujillo Relatório

0

You can simply define an onchange event which will remove the visibility of the previously selected item and make the currently selected item visible.

function selectSection(value) {
    let context = document.getElementById("sections");
    for (let visible of context.querySelectorAll("p.visible")) {
        visible.classList.remove("visible");
    }
    if (context.children[value]) context.children[value].classList.add("visible");
}
#sections > p:not(.visible) {
    display: none;
}
<select id="section-selector" onchange="selectSection(this.value)">
    <option value="">Please Select</option>
    <option value="0">First</option>
    <option value="1">Second</option>
    <option value="2">Third</option>
    <option value="3">Fourth</option>
    <option value="4">Fifth</option>
</select>

<div id="sections">
    <p>section 1</p>
    <p>section 2</p>
    <p>section 3</p>
    <p>section 4</p>
    <p>section 5</p>
</div>

about 4 years ago · Santiago Trujillo Relatório

0

Here is an updated version jsFiddle

var  menuItemToClick = document.querySelectorAll('.e38')


function cars(){
// I use for here because the menuItemToClick is an array that containt all element having class name e38
  for (var i = 0; i < menuItemToClick.length; i++) {
      menuItemToClick[i].addEventListener('click', function(event) {
          console.log('clicked');
          ParagraphToHide = document.querySelectorAll('#e38value');
          //I use [0] because the ParagraphToHide is an array, as we use an id we are pretty sure that we will select the first element 
          ParagraphToHide[0].classList.toggle("e38hidden");
      });
  }
} 

cars();
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda