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.

JS:

var e38 = document.querySelectorAll('e38value')

function cars(){
document.querySelectorAll('e38').onclick = function(){
console.log('clicked');
e38.classList.toggle("e38hidden");
}}

CSS:

.e38hidden{
    display: none;
}

HTML:

<script src="onclick.js"></script>
  <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 >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" >e38 value</p>

CodePudding user response：

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?

CodePudding user response：

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>

CodePudding user response：

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();