Stuck with a simple JQuery code to show and hide section of page

Question

I'm trying to translate a JQuery code to Javascript because importing the library of JQuery isn't the best optimization for a website and my codes are pretty simple, even if i'm not enough skilled to do it by myself and i need the help of the community...

So here is my code

    $(function() {
        $('#cityselector').change(function(){
            $('.city').hide();
            $('.' + $(this).val()).show();
        });
    });

I know that in JS i may need to create a let variable that i will define by clicking on the right element and then create a function that changes the status of the element (showed or hidded)

document.getElementById('citySelector').addEventListener('click', function(){
    document.getElementByClass(this).style.display = "block";
    document.getElementByClass('city').style.display = "hidden";
});

I don't know how to select the right css class for each city i listed, because every element of the page has 2 class: 'city' and the name of the city like 'oxford', 'london'. The goal is to show to class we select

The html code:

   <Select id="cityselector" class="selectordeville">
    
   <option value="oxford">Oxford</option>
   <option value="cambridge">Cambridge</option>
   <option value="stonehenge">Stonehenge</option>
   <option value="bath">Bath</option>
   <option value="york">York</option>
   <option value="robinhoodbay">Robin's hood's bay</option>
   <option value="lakedistrict">Lake District</option>
   <option value="snowdonia">Snowdonia</option>
   <option value="bristol">Bristol</option>
   <option value="cardiff">Cardiff</option>
   <option value="glasgow">Glasgow</option>
   <option value="edinburgh">Edinburgh</option>
   <option value="highlands">Highlands</option>
   <option value="harrypotter">Harry Potter Studios</option>
   <option value="altontowers">Alton towers</option>
   <option value="thorpepark">Thorpe park</option>
   <option value="windsor">Windsor</option>
   <option value="liverpool">Liverpool</option>
   <option value="brighton">Brighton</option>
   <option value="eurotrip">Eurotrip</option>
   <option value="canterbury">Canterbury</option>
</Select>

Thank you very much for your help, i'm learning JS and i stil have problems to understand how to use 'this' in JS, JQuery is too "magic" simple and don't give us good habits i think.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Oct 17 '20 at 17:12
You probably want to listen for the "change" event and use `this.value` for the first statement in the event handler. — Heretic Monkey, Oct 17 '20 at 17:13

score 0 · Answer 1 · answered Oct 18 '20 at 02:08

The JS methods name you are using should be corrected, getElementsByClassName instead of getElementByClass
display = "none" instead of hidden
getElementsByClassName() returns a HTMLCollection Object, you cannot set the style directly, you need to iterate through it

document.getElementById('cityselector').addEventListener('change', function(){
   
   // hide any currently showing element - equivalent to  $('.city').hide();
   var cities = document.getElementsByClassName('city');
   Array.from(cities).forEach(function(element) { 
     element.style.display = "none"
     }
   );
    
   
   // show any element having the selected class - equivalent to $(.cityname).show()
   var selected = document.getElementsByClassName(this.value);
   Array.from(selected).forEach(function(element) { 
     element.style.display = "block"
     }
   );
   
});

.city{
 display:none;
}

<Select id="cityselector" class="selectordeville">
    
   <option value="oxford">Oxford</option>
   <option value="cambridge">Cambridge</option>
   <option value="stonehenge">Stonehenge</option>
   <option value="bath">Bath</option>
   <option value="york">York</option>
   <option value="robinhoodbay">Robin's hood's bay</option>
   <option value="lakedistrict">Lake District</option>

</Select>

<div class="city oxford">Oxford</div>
<div class="city cambridge">Cambridge</div>
<div class="city stonehenge">Stonehenge</div>
<div class="city bath">Bath</div>
<div class="city york">York</div>
<div class="city robinhoodbay">Robin's hood's bay</div>
<div class="city lakedistrict">Lake District</div>

Stuck with a simple JQuery code to show and hide section of page

1 Answers1