title: Stuck with a simple JQuery code to show and hide section of page
body: <p>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...</p>
  <p>So here is my code</p>
  <pre><code>    $(function() {
          $('#cityselector').change(function(){
              $('.city').hide();
              $('.' + $(this).val()).show();
          });
      });
  </code></pre>
  <p>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)</p>
  <pre><code>document.getElementById('citySelector').addEventListener('click', function(){
      document.getElementByClass(this).style.display = &quot;block&quot;;
      document.getElementByClass('city').style.display = &quot;hidden&quot;;
  });
  </code></pre>
  <p>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</p>
  <p>The html code:</p>
  <pre><code>   &lt;Select id=&quot;cityselector&quot; class=&quot;selectordeville&quot;&gt;
      
     &lt;option value=&quot;oxford&quot;&gt;Oxford&lt;/option&gt;
     &lt;option value=&quot;cambridge&quot;&gt;Cambridge&lt;/option&gt;
     &lt;option value=&quot;stonehenge&quot;&gt;Stonehenge&lt;/option&gt;
     &lt;option value=&quot;bath&quot;&gt;Bath&lt;/option&gt;
     &lt;option value=&quot;york&quot;&gt;York&lt;/option&gt;
     &lt;option value=&quot;robinhoodbay&quot;&gt;Robin's hood's bay&lt;/option&gt;
     &lt;option value=&quot;lakedistrict&quot;&gt;Lake District&lt;/option&gt;
     &lt;option value=&quot;snowdonia&quot;&gt;Snowdonia&lt;/option&gt;
     &lt;option value=&quot;bristol&quot;&gt;Bristol&lt;/option&gt;
     &lt;option value=&quot;cardiff&quot;&gt;Cardiff&lt;/option&gt;
     &lt;option value=&quot;glasgow&quot;&gt;Glasgow&lt;/option&gt;
     &lt;option value=&quot;edinburgh&quot;&gt;Edinburgh&lt;/option&gt;
     &lt;option value=&quot;highlands&quot;&gt;Highlands&lt;/option&gt;
     &lt;option value=&quot;harrypotter&quot;&gt;Harry Potter Studios&lt;/option&gt;
     &lt;option value=&quot;altontowers&quot;&gt;Alton towers&lt;/option&gt;
     &lt;option value=&quot;thorpepark&quot;&gt;Thorpe park&lt;/option&gt;
     &lt;option value=&quot;windsor&quot;&gt;Windsor&lt;/option&gt;
     &lt;option value=&quot;liverpool&quot;&gt;Liverpool&lt;/option&gt;
     &lt;option value=&quot;brighton&quot;&gt;Brighton&lt;/option&gt;
     &lt;option value=&quot;eurotrip&quot;&gt;Eurotrip&lt;/option&gt;
     &lt;option value=&quot;canterbury&quot;&gt;Canterbury&lt;/option&gt;
  &lt;/Select&gt;
  </code></pre>
  <p>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 &quot;magic&quot; simple and don't give us good habits i think.</p>