Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

105
Views
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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!