We Keep Coding

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>

You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.

Try and replace DomContentLoaded with load

Jquery With Button Onclick not display window

sorry for my English..I'm very new with javascript...
I want my Jquery code to open a Window,
Here is my code in javascript, Html and Css,
function layer_show_3()
{
$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
if(posTop<0)
posTop=0;
$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
$('#layerPreviewContent-3').show(600);
}
function layer_close_3()
{
$('#layerPreviewContent-3').hide(300);
$('#layerPreview-3').hide();
}
.kaufen {
float: right;
width: 45%;
background-color: #cccccc;
padding-right: 10%;
padding-bottom: 1%;
margin-left: 3%;
margin-top: 11%;
padding-top: 1%;
}
.tittle-kaufen {margin-left: 15%; font-weight: bold; width: 100%; float: left; }
.preis {margin-left: 4%; font-weight: bold; margin-top: 5%; float: left; }
.piece {float: right; font-weight: bold; padding-top: 20%; margin-right: 55%; }
.quantity {
float: left;
margin-top: 5%;
background-color: #eee;
position: relative;
width: 18%;
overflow: hidden;
margin-left: 3%;
border: 1px solid #b3b3b3;
margin-left: 9%;
}
.quantity input {
margin: 0;
text-align: center;
width: 5%;
padding: 0;
float: right;
color: #000;
font-size: 1.5rem;
border: 0;
outline: 0;
background-color: #d9d9d9;
}
.quantity input.qty {
position: relative;
border: 0;
width: 100%;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
text-align: center;
font-weight: 400;
font-size: 15px;
border-radius: 0;
background-clip: padding-box
}
.quantity .minus, .quantity .plus {
line-height: 0;
background-clip: padding-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-background-size: 0.375rem 1.875rem;
-moz-background-size: 0.375rem 1.875rem;
color: black;
font-size: 1.25rem;
position: absolute;
height: 50%;
border: 0;
right: 0;
padding: 0;
width: 33%;
z-index: 3
}
.quantity .minus:hover, .quantity .plus:hover {background-color: #dad8da}
.quantity .minus {bottom: 0}
.button_wrap {
float: right;
min-width: 75%;
background-color: transparent;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
font-family: 'Open Sans', sans-serif;
color: #111;
margin-right: 1%;
padding-right: 1%;
}
.button_wrap_buttom {margin-top: 15%; margin-left: 6%; color: white; background-color: #b3b3b3; padding: 3%;}
.button_wrap_buttom:hover {background-color: #666666; }
.form-basket {
margin-top: 30px;
margin-bottom: 0px;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 18px;
line-height: 18px;
}
.addtobasket-container {
padding: 0;
margin: 0;
border: 0;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 1rem;
line-height: 18px;
}
/* ***** Anfang Fenster 1 producut **** */
#layerPreview-3 {position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;
background-color: rgba(50, 50, 50, 0.5);
}
#layerPreviewContent-3{position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
width:30%;
margin-left:-250px;
height:40%;
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="kaufen">
<form class="form-basket" method="post" enctype="multipart/form-data">
<fieldset class="addtobasket-container">
<span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>
<span class="preis"> Preis 40 € </span>
<span class="piece">Stück</span>
<div class="quantity">
<input type="button" value="+" class="plus">
<input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
<input type="button" value="-" class="minus">
</div>
<div class="button_wrap" >
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
</div>
</fieldset>
</form>
<!-- En el momento que se pulse sobre la capa transparente se cerrara -->
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text" onclick="layer_close-3();">Schließen</span></div>
<div id="bild-text"><img alt="" src="photo/113.jpg"></div>
<div id="text-pruduct">
<p>Verfügbarkeit: <b>eine Menge</b></p>
<p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
</div>
</div>
</div>
</div>
My Problem is when clicking the Botton Zum warenkorb hinzufügen nothing displays, when it should open a window..
Here is the JSFiddle Link for the code
Can someone please help me and explain with easy Words what I am doing wrong?

The problem is with how are you trying to handle an onclick event on a button, without taking into consideration that this button is a part of a form
In simple words, whenever a button is pressed inside of a form it tries to submit that form via html post request if not declared otherwise.
So if you want this to work you can do something like this.
Change this
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
to
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
with event being passed as parameter to layer_show_3 function.
Change your function declaration to
function layer_show_3(event) { ... }
and add this line at starting of the function
event.preventDefault();
this will override the default functionality of a button inside of a form.

How to disable transformation of search-box when there's input?

I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!

This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>

You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

Multiple Inputs that live update into another div

I'm trying to create multiple text inputs that live update into another div. The first input/div pair works but the next two do not.
Here is my html:
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox'></div>
<div class='printchatbox' id='printchatbox'></div>
<div class='printchatbox' id='printchatbox'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput'>
<input type='text' name='fname' class='chatinput' id='chatinput'>
<input type='text' name='fname' class='chatinput' id='chatinput'>
</div>
</div>
Here is my javascript:
var inputBox = document.getElementById("chatinput");
inputBox.onkeyup = function() {
document.getElementById("printchatbox").innerHTML = inputBox.value;
};
and here is a demo

Try this out,
var inputBox1 = document.getElementById("chatinput1");
inputBox1.onkeyup = function() {
document.getElementById("printchatbox1").innerHTML = inputBox1.value;
};
var inputBox2 = document.getElementById("chatinput2");
inputBox2.onkeyup = function() {
document.getElementById("printchatbox2").innerHTML = inputBox2.value;
};
var inputBox3 = document.getElementById("chatinput3");
inputBox3.onkeyup = function() {
document.getElementById("printchatbox3").innerHTML = inputBox3.value;
};
body {
background: #eee;
}
#document {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
padding: 30px 0;
width: 70%;
max-width: 850px;
margin: 0 auto;
margin-top: 100px;
}
.printchatbox {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
.printchatbox2 {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
#listItem {
padding: 30px;
}
#editorWrapper {
background: #444;
padding: 30px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background: #555;
}
input[type=text]:focus {
outline: none;
border: 1px solid #aaa;
background: #777;
}
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox1'></div>
<div class='printchatbox' id='printchatbox2'></div>
<div class='printchatbox' id='printchatbox3'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput1'>
<input type='text' name='fname' class='chatinput' id='chatinput2'>
<input type='text' name='fname' class='chatinput' id='chatinput3'>
</div>
</div>
The problem was, you always use the same id to get the element which always fetches the first occurrence of the element.

Try this out, giving same id never work
HTML
<div id="document">
<div id="listItem">
<div class='printchatbox' id='printchatbox1'></div>
<div class='printchatbox' id='printchatbox2'></div>
<div class='printchatbox' id='printchatbox3'></div>
</div>
<div id="editorWrapper">
<input type='text' name='fname' class='chatinput' id='chatinput1'>
<input type='text' name='fname' class='chatinput' id='chatinput2'>
<input type='text' name='fname' class='chatinput' id='chatinput3'>
</div>
</div>
CSS
body {
background: #eee;
}
#document {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
padding: 30px 0;
width: 70%;
max-width: 850px;
margin: 0 auto;
margin-top: 100px;
}
.printchatbox {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
.printchatbox2 {
border-width: thick 10px;
border-style: solid;
background-color: #fff;
line-height: 2;
color: #6E6A6B;
font-size: 14pt;
text-align: left;
float: middle;
border-width: 0 0 1px 0;
border-color: #ddd;
width: 40%;
height: 44px;
}
#listItem {
padding: 30px;
}
#editorWrapper {
background: #444;
padding: 30px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background: #555;
}
input[type=text]:focus {
outline: none;
border: 1px solid #aaa;
background: #777;
}
JS
var inputBox1 = document.getElementById("chatinput1");
inputBox1.onkeyup = function() {
document.getElementById("printchatbox1").innerHTML = inputBox1.value;
};
var inputBox2 = document.getElementById("chatinput2");
inputBox2.onkeyup = function() {
document.getElementById("printchatbox2").innerHTML = inputBox2.value;
};
var inputBox3 = document.getElementById("chatinput3");
inputBox3.onkeyup = function() {
document.getElementById("printchatbox3").innerHTML = inputBox3.value;
};
https://codepen.io/djmayank/pen/RZozPX

Focusout when click on outside of div container

I have a small piece of code and i wanted to know that how can I do when I click on outside div class="gutte" and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of div class="gutte" (or <body> ) and i cannot use input type[text]. When I click on btn1 div class="gutte" focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>

When you focus in a element, any element that has focused make focusout, then target element make focused. See this example for better understanding.
$("input").focus(function(){
console.log(this.name + " focused");
}).blur(function(){
console.log(this.name + " blured");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" />
<input name="B" />
<input name="C" />
You need to add focus event to any button like this:
Answer:
Jsfiddle