So I'm working on a website with the Glitch Framework. I have a script that I want to create an iFrame when the user connects to the webpage. The script has a variable that reads from an <input> block, then sets the iFrame link to the variable plus the rest of the link. The input and script are on separate pages, so here are the two pages:
index.html
<body>
<label for="puServNm">Server name:</input>
<input type="text" id="puServNm" name="puServNm">
<button onclick="connectPublic()">Connect</button>
<!-- connectPublic() redirects you to 'connect-public.html' -->
</body>
connect-public.html
<body>
<script type="text/javascript">
var connectPub = document.getElementsByName("puServNm")[0].value;
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.src = "https://" + connectPub + "-uc.glitch.me";
</script>
When I access connect-public.html after filling out the input and then clicking connect nothing loads. I open up the console and it says "Uncaught TypeError: Cannot read property 'value' of undefined at connect-public.html:18"
What have I done wrong, or need to fix? If this exact same question has been asked, please link me to it- it'd be greatly appreciated.