function undefined when using iframe-CodePudding

I am making browser webapp in javascript. The strange problem is, whenever I add iframe tag in my html. The javascript stops working.

My html:

<input type="text" id="input">
<button onclick="sean()"></button>
<iframe id="outp" src="about:blank"></iframe>

My JS:

function sean(){
var input = document.getElementById('input').value;
var iframe = document.getElementById('outp')
iframe.src= "https://" input
alert('worked');
};

The funny thing is as soon as I comment the iframe tag (not even modifying js) the function works and displays the alert message otherwise it keeps saying sean not defined.

Here is a pen showing error, if needed:

https://codepen.io/ShazamBolt8/pen/yLpqeXZ

If possible please add a working snippet.

Thanks in advance :)

CodePudding user response：

let input = document.getElementById("txt");
let btn = document.getElementById("btn");
let iframe = document.getElementById("ifr");

btn.addEventListener("click", () => {
  iframe.src = "https://"   input.value;
  alert("wo4ked");
});

<input id="txt" type="text" >
<button id="btn">GO</button>
<iframe id="ifr" src="about:blank" frameborder="10"></iframe>