Can't display content in a dropdown menu

Question

I am trying to create a dropdown menu to display some widgets but I am only able to display the first widget. When I go to any of the other options the content is not displayed and the page remains empty.

< script >
  document.getElementById('target')
  .addEventListener('change', function() {
    'use strict';
    var vis = document.querySelector('.vis'),
      target = document.getElementById(this.value);
    if (vis !== null) {
      vis.className = 'inv';
    }
    if (target !== null) {
      target.className = 'vis';
    }
  }); <
/script>

<style>.inv {
  display: none;
}

</style>

<select style="margin-bottom:10px;" id="target">
  <option value="">Select your option</option>
  <option value="content1">Option 1</option>
  <option value="content2">Option 2</option>
  <option value="content3">Option 3</option>
</select>

<div id="content1" class="inv"><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;&amp;fc=1&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:200px!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>

  <div id="content2" class="inv"><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;&amp;fc=7&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:100%!important;border:0"></iframe>
    <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>

    <div id="content3" class="inv"><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;&amp;fc=2&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:200px!important;border:0"></iframe>
      <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>

I am not able to find where the error is, I have just tried the same code with tweets timelines and with texts and it works fine, I just have this problem with these widgets.

Looking forward to hear how can I fix this, thank you for the time!

Answer 1

Every opening tag, for example <div> should have a closing tag </div>. When you copied in the source to your <iframe> you forgot to make sure that there was a closing tag. So, you need to add a closing </div> just after "Live Sports TV Guide"</a></div> in three places.

This now works with your TV listing sources, but I could not see any difference in the view because it looks like you have used the same widget three times, so I changed your listings for images of animals and everything works.

document.getElementById('target')
  .addEventListener('change', function() {
    'use strict';
    var vis = document.querySelector('.vis'),
      target = document.getElementById(this.value);
    if (vis !== null) {
      vis.className = 'inv';
    }
    if (target !== null) {
      target.className = 'vis';
    }
  });

.inv {
  display: none;
}

<select style="margin-bottom:10px;" id="target">
  <option value="">Select your option</option>
  <option value="content1">Option 1</option>
  <option value="content2">Option 2</option>
  <option value="content3">Option 3</option>
</select>

<div id="content1" class="inv"><iframe src="https://source.unsplash.com/random/800x400/?cat" width="100%" height="300" style="height:200px!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>

<div id="content2" class="inv"><iframe src="https://source.unsplash.com/random/800x400/?dog" width="100%" height="300" style="height:100%!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>

<div id="content3" class="inv"><iframe src="https://source.unsplash.com/random/800x400/?parrot" width="100%" height="300" style="height:200px!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>