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" ><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&id=1&time_zone=US/Eastern&&fc=1&time12=0&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" ><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&id=1&time_zone=US/Eastern&&fc=7&time12=0&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" ><iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&id=1&time_zone=US/Eastern&&fc=2&time12=0&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!
CodePudding user response:
Every opening tag, for example <div>
should have a closing tag </tag>
. 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" ><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" ><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" ><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>