How to display an iframe by clicking a button (JavaScript)

Question

I am trying to display an iframe when a button is clicked. I got the following JS code:

function show() {
    var iframe1 = document.getElementById('iframe');
    iframe1.style.display = 'block';
}

and here is the HTML of my page:



  
    Welcome

The script is inside an external file named files.js. When I test the code, it works, but the iframe only shows for 1 milisecond. What's wrong?

Thanks in advance for your answers!

user_959552 · Answer

Add type="button" to your

EDIT: Additional code in response to OP's comment:

var iframeShowing = false;

function show() {
    var iframe1 = document.getElementById('iframe');
    iframe1.style.display = iframeShowing ? 'block' : 'none';
    iframeShowing = !iframeShowing;
}

user_1456997 · Answer

The form is causing a page reload. You can stop that by simply adding a event.preventDefault(). function show(e) { e.preventDefault(); ...

However, you will need to inject the event parameter in the function call. onclick="show(event)"

Another option you have is just remove the form tag and keep the button tag. That should do the trick.

How to display an iframe by clicking a button (JavaScript)

2 Answers