We Keep Coding

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

Div contents don't appear on button press in anything other than jsfiddle

I have a script that opens a div where you can change the time of a timer, and it opens on a button press. This works fine in fiddle, the div opens up and the div contents appear, but other IDEs don't work (Coding Rooms, Programiz, pretty much any other online IDE)--the div never appears. The code is below. Any solutions or explanations?
Is it maybe because JSFiddle uses a different version of JS? I honestly have no idea.
Here is the JSFiddle so you can see the full code.
var setTimeMenu = document.getElementById("setTimeMenu");
var openTimeSetMenu = document.getElementById("setTimeMenuOpenButton");
var closeTimeSetMenuSpan = document.getElementsByClassName("close")[0];
openTimeSetMenu.onclick = function() {
setTimeMenu.style.display = "block";
}
closeTimeSetMenuSpan.onclick = function() {
setTimeMenu.style.display = "none";
}
window.onclick = function(event) {
if (event.target == setTimeMenu) {
setTimeMenu.style.display = "none";
}
}
.timeTypeText {
font-size: 16pt;
font-weight: bold;
font-family: "Helvetica", sans-serif;
display: inline;
}
.timeAmountText {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 14pt;
}
.centerVertical {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.Modal {
display: none;
position: fixed;
z-index: +1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modalContents {
font-family: "Helvetica", sans-serif;
font-size: 14pt;
background-color: #fefefe;
margin: 15% auto;
padding: 15px;
border: 1px solid #888;
width: 70%;
}
.close {
color: #ffffff;
float: right;
font-size: 48px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #cccccc;
text-decoration: none;
cursor: pointer;
}
input {
background-color: white;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
transform: scale(80%);
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
input::placeholder {
overflow: visible;
}
select,
input {
background-color: #ededed;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
transform: scale(80%);
margin: 0;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
select.minimal {
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
}
select.minimal:focus {
background-image:
linear-gradient(45deg, green 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, green 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 15px) 1em,
calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
border-color: green;
outline: 0;
}
select.minimal:hover {
cursor: pointer;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.ButtonStyle {
text-align: center;
font-family: "Helvetica", sans-serif;
font-weight: bold;
cursor: pointer;
font-size: 12px;
position: relative;
background-color: #e3e3e3;
border: thin solid blue;
border-radius: 4px;
padding: 10px;
width: max;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.ButtonStyle:hover {
background: #fff;
box-shadow: 0px 2px 10px 5px #97B1BF;
color: #000;
}
.ButtonStyle:after {
content: "";
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.ButtonStyle:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.disabled {
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
cursor: not-allowed;
}
.not-allowedCursor {
cursor: not-allowed;
}
input {
display: block;
margin: 0 auto;
}
<body>
<button id="setTimeMenuOpenButton" class="ButtonStyle">Set School Closing Time</button>
<div id="setTimeMenu" class="Modal">
<span class="close">×</span>
<div class="modalContents">
<p align="center" style="font-weight: bold;">Change the time and date to when your Summer vacation starts!</p><br>
<input id="timeInputBox" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}" size="10" maxlength="8" placeholder="Time:">
<p align="center" style="font-size: 9pt; font-weight: bold;">You must use the format "hr:min:sec" to change the time! Time must also be in military time!</p>
<p align="center" style="font-size: 9pt; font-weight: bold; color: grey;">e.g.: 14:06:00</p>
<input type="submit" class="ButtonStyle" style="transform: scale(120%); font-size: 16pt; margin-left: 23px; padding-left: 45px; padding-right: 45px" required>
</div>
</div>
<div id="timerDiv" align="center">
<div class="timeTypeText">Days: </div>
<div class="timeAmountText"><span class="days"></span></div><br>
<div class="timeTypeText">Hours: </div>
<div class="timeAmountText"><span class="hours"></span></div><br>
<div class="timeTypeText">Minutes: </div>
<div class="timeAmountText"><span class="minutes"></span></div><br>
<div class="timeTypeText">Seconds: </div>
<div class="timeAmountText"><span class="seconds"></span></div>
</div>
</body>

If you download the JSEditor.io code you will notice the script tag is added in head so the script is not able to find the elements in body so the code is not working

uncaught typeerror cannot read property of null (reading 'queryselector')

I am trying to hide the current page then transition from to the next one but I keep getting this error. Ive tried everything but it keeps saying uncaught typeerror cannot read property of null (reading 'queryselector')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> Tic Tac Toe </title>
<link rel="stylesheet" type="text/css" href="TicTacToe.css" title="style" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="TicTacToe.js"></script>
</head>
<body>
<!---Startpage--->
<div class="content">
<header><h2>Tic Tac Toe</h2>
<div class="Begin">
<h3>Play the game, Click <span>START</span> to begin</h3>
</div>
</header>
<div class="game-board">
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
<div class="options">
<button class="Start">Start Game </button>
<button class="Exit"> Exit Game</button>
</div>
</div>
<!---Select your player--->
<div class="Select-box">
<header> Tic Tac Toe </header>
<div class="main">
<div class="title">Select who you want to play as </div>
<div class="selectoptions">
<button class="playerX">Player X's</button>
<button class="playerO"> Player O's</button>
</div>
</div>
</div>
<!---Select between option--->
<div class="Playerbox">
<header> Tic Tac Toe </header>
<div class="main">
<class class="title">Who are you playing against?</div>
<div class="playoptions">
<button class="Player">Player vs Player</button>
<button class="Machine"> Player vs Computer</button>
</div>
</div>
</div>
</body>
</html>
Here is the css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body {
background: lightcoral;
}
/*Beginning of start page */
h2 {
text-align: center;
color: white;
white-space: nowrap;
}
h3 {
text-align: center;
color: white;
white-space: nowrap;
}
.content{
position: absolute;
top: 25%;
left: 40%;
transform: translate(-25%, -40%);
padding: 20px 25px 25px;
border-radius:5px;
transition: all 0.3 ease;
display: none;
}
.game-board
{
width: 450px;
height: 450px;
margin: 0 ;
padding-top: 50px;
background-color: lightcoral;
color: #fff;
border: 2px solid white;
border-radius: 10px;
border-top: 50px;
border-left: 50px;
border-right: 50px;
display: grid;
grid-template: repeat(3, 2fr) / repeat(3, 2fr);
}
.box
{
border: 2px solid white;
border-radius: 2px;
font-family: Helvetica;
font-weight: bold;
font-size: 4em;
display: flex;
justify-content: center;
align-items: center;
}
.Start {
display: inline-block;
padding: 15px 15px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 19%;
}
.Start:hover {background-color: #3e8e41}
.Start:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.Exit {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 55%;
}
.Exit:hover {background-color: red}
.Exit:active {
background-color: red ;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*End of start page*/
/*Start of player selection page*/
.Select-box{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
transition: all 0.3 ease;
}
.Select-box .hide{
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%)scale(0.9);
}
.Select-box header{
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
}
.Select-box .title{
font-size: 18px;
font-weight: 500;
margin: 20px 0;
}
.Select-box .selectoptions{
display: flex;
width: 100%;
}
.selectoptions button{
width: 100%;
font-size: 19px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
}
.selectoptions button:hover{
transform:scale(0.96);
}
.selectoptions button.playerX{
margin-right: 7px;
}
.selectoptions button.playerO{
margin-right: 7px;
}
/*End of player selection page*/
/*Start of oponent selection page*/
.Playerbox{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
display: none;
}
.Playerbox header{
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
}
.Playerbox .title{
font-size: 18px;
font-weight: 500;
margin: 20px 0;
}
.Playerbox .playoptions{
display: flex;
width: 100%;
}
.playoptions button{
width: 100%;
font-size: 15px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
}
.playoptions button:hover{
transform:scale(0.96);
}
.playoptions button.Player{
margin-right: 4px;
}
.playoptions button.Machine{
margin-right: 4px;
}
/*End of oponent selection page*/
And the JS code im trying to run
const selectBox = document.querySelector(".Select-box"),
selectXBtn = selectBox.querySelector(".playerX"),
selectOBtn = selectBox.querySelector(".playerO");
window.onload = () =>{// once our window is loaded
selectOBtn.onclick = () =>{
selectBox.classList.add("hide");//hide the select box on playerx
}
}
Any help would be greatly appreciated. Also if you could sort of guide me on creating the sever side of the tic tac toe game that would be really helpful

It looks like you're including your <script src="TicTacToe.js"></script> tag before the DOM has loaded. That means lines like selectXBtn = selectBox.querySelector(".playerX"), which execute immediately, will fail because the DOM has not yet loaded.
You can either move selectXBtn and selectOBtn into the global namespace (and declare them var) and initialize them in the window.onload handler, or just move your <script> tag to just before the </body> tag.
Also, why are you using vanilla JS for DOM manipulation when you're including the jQuery library which makes the syntax simpler?

How to display text written in input type by user into an iframe?

I am creating a t-shirt designing website for my college project.I want to display the text written by the user in 'input type text' in the iframe where i have set a t-shirt as the background image.I searched the internet but couldn't get any viable solution..
I want the text to appear on top of the t-shirt on the chest area.
Any help is appreciated..
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<form action="include/storeinfo.inc.php" method="post">
<div>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="large"/>
Large(L)
</label>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="text" class="gate" id="enter" placeholder="Max 10 letters.." maxlength="10" />
<label for="enter">Enter</label>
</span>
<br>
<input type="submit" class="colorbutton" value="Proceed" name="submit" style="margin-top:20px; margin-left:100px;">
<input type="submit" class="colorbutton" value="Preview" name="submit1" style="margin-top:20px; margin-left:50px;">
</form>
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
html file of iframe:
<html>
<head>
<style>
body
{
overflow-y: hidden;
overflow-x: hidden;
background: url(image/white.jpg);
background-size: 690px 690px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

Unless you have a very good reason for doing so, don't use and . Seems unnecessary and convoluted.
It's quite simple to grab the value from an <input> or <textarea> with JavaScript and place it in another element, like a <div>. Here's an uber basic example that would produce a live example (pretend that the green DIV is a photo of a t-shirt).
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
.demo-tshirt {
position: relative;
width: 300px;
height: 400px;
background-color: seagreen;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 50%;
width: 50%;
transform: translateX( -50%);
color: white;
font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="tshirt-text">
Text: <input type="text" id="tshirt-text" class="tshirt-text" name="tshirt-text">
</label>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>

If the entire content of your iframe is just the background definition, you could write the HTML to the iframe document directly.
from Write elements into a child iframe using Javascript or jQuery ...
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow
|| ifrm.contentDocument.document
|| ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

accordion button unhidden text

hi I am building a button where hide/show content when click on, however when I apply some styles to the content it won't hide anymore, I suspect it has got something to do with the css position, but can't figure it out why, could someone please help me? thanks in advance
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
button.accordion {
background-color: #13294b;
border: 2px solid #59cbe8;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #1f447b;
}
button.accordion:after {
content: '\002B';
color: #59cbe8;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.action1 {
position: absolute;
margin-top: -115px;
margin-left: 35px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
.action2 {
position: absolute;
margin-top: -115px;
margin-left: 175px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
<button class="accordion">This is the button</button>
<div class="panel">
<p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p>
<p class="action1">Recognise</p>
<p class="action2">Remove from play</p>
</div>

Your paragraphs are absolutely positioned, but not relative to the panel that is hiding/showing. To position those relative to .panel, add position: relative to .panel, and the paragraphs will hide/show with `.panel.