I am using javascript to set style properties on several elements when my wordpress pages are served in an iFrame. I keep getting an error and cannot figure out what I'm doing wrong. Here is what I have that works.
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
document.getElementById('colophon').style.display = "none";
document.getElementsByClassName('header-outer-wrapper')[0].style.display = "none";
}
</script>
But as soon as I add another line to my IF statement I start getting an error in the console. This is when I get an error:
<script type="text/javascript">
var isInIFrame = (window.location != window.parent.location);
if(isInIFrame==true){
document.getElementById('colophon').style.display = "none";
document.getElementsByClassName('header-outer-wrapper')[0].style.display = "none";
document.getElementsByClassName('tribe-events-event-categories-label')[0].style.display = "none";
}
</script>
Here is the error I get.
TypeError: document.getElementsByClassName(...)[0] is undefined fitzgerald-high-school-college-and-career-academy-calendar:1200:225
<anonymous> Choo
I have about 12 CSS styles I need to apply based on the class. Can I not use this method multiple times in the same if statement or script? What am I doing wrong?