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>
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:
cars() to actually initialise the events.e38 classforEach as the querySelector returns an array of elements (in that case with only one element)Here is a fiddle: https://jsfiddle.net/b9728Lmk/1/
Does that solve the problem?
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>
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();