0

I'm trying to show an iframe only when I click a button using javascript, but it's not working and I have no idea why.

//I tried this way. did not work.

document.querySelector(".buttonweek").addEventListener('click', function()      {ThisWeek();});

function ThisWeek(){
  document.querySelector("#week").style.display = "block";
}

//then I tried that way. did not work.

document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});

function ThisWeek(){
  document.getElementById("week").style.display = "block";
}
iframe{
    display:none;
    width: 1280px;
    height: 1000px;
}
<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
    
<iframe src="thisweek.php" id="week"></iframe>
</ul>

I also tried to use the onclick in the obstrusive way, it also did not work !!

If anyone has read this, thank you!

Oram
  • 1,421
  • 2
  • 14
  • 20
Kerolaine
  • 13
  • 3
  • Any errors thrown in browser console? Problem is probably related to [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – charlietfl Nov 13 '18 at 16:01
  • 3
    I've ran this code and it seems to work? Are you getting any console errors? – Andrew1996 Nov 13 '18 at 16:02
  • Live demos are great, but they need to be [mcve]s. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and **only** CSS. – Quentin Nov 13 '18 at 16:10

1 Answers1

-1

This should help you,

window.onload = function(){

document.getElementById("idweek").addEventListener('click', function(){

document.getElementById("week").style.display = "block";

});

}
iframe{
display: none;
}
<ul>
<li><button type="button" class="buttonweek"  id="idweek">Hot This Week</button></li>
    
<iframe src="thisweek.php" id="week"></iframe>
</ul>
Hary
  • 5,208
  • 6
  • 31
  • 67