Я работал над проектом, который требовал изменить цвет фона веб-страницы, когда пользователь наводит указатель мыши на текстовое поле, и вся тема веб-страницы должна меняться, когда указатель мыши находится на этом текстовом поле. Это работало хорошо, но когда я добавил кнопку отправки и сделал функцию для изменения ее свойств при наведении мыши и выключении мыши, весь код Javascript перестал работать!
<!DOCTYPE html>
<?php
function redirect($url){
ob_start();
header('Location: '.$url);
ob_end_flush();
die();
}
$error = "";
$myurl = $_SERVER['REQUEST_URI'];
if (isset($_GET['name'])) {
$name = $_GET['name'];
} else {
$name = "";
}
//$name = $_GET["name1"];
$name = trim($name);
if(empty($name)){
$error="";
}else{
echo $myurl;
}
?>
<html>
<head>
<title>We Wish</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa:700&display=swap');
body{
background-color: #1a1a1a;
}
input{
background-color: transparent;
border-radius: 50px;
border: 1.5px solid white;
}
#pallete{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#nametf{
width: 200px;
height: 20px;
padding: 5px 10px;
color: white;
font-size: 15px;
font-family: 'Comfortaa', cursive;
}
#nametf:hover{
border: 1.5px solid #1a1a1a;
}
#btn{
color: white;
font-family: 'Comfortaa', cursive;
background-color: transparent;
border: 1.5px solid white;
border-radius: 50px;
padding: 9px 20px 8px 20px;
margin-top: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
cursor: pointer;
transition-duration: 0s;
}
#btn:hover{
color: #1a1a1a;
background-color: cyan;
border-color: cyan;
box-shadow: 0px 0px 15px cyan;
}
</style>
</head>
<body>
<center>
<div id="pallete">
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onmouseover="bgChange('white','#1a1a1a')" onmouseout="bgChange('#1a1a1a','white')" onchange="widen()" value="" required>
</form>
<span>
<input type="submit" name="submit" id="btn" value="CREATE" onmouseover="glow('on')" onmouseout="glow('off')">
</span>
</div>
</center>
</body>
<script type="text/javascript">
var nametf = document.getElementById('nametf');
function bgChange(bg,color){
document.body.style.background = bg;
nametf.style.color = color;
var btn = document.getElementById('btn');
if(bg=='white'){
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid #1a1a1a";
btn.style.color = "#1a1a1a";
} else {
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid white";
btn.style.color = "white";
}
}
function widen(){
var value = nametf.value;
if(value.length > 17){
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
function glow(mode){
if(mode=='on'){
btn.style.transition-duration = "0.4s";
btn.style.color = "#1a1a1a";
btn.style.background-color = "cyan";
btn.style.border-color = "cyan";
btn.style.box-shadow = "0px 0px 15px cyan";
} else {
btn.style.transition-duration = "0.4s";
btn.style.color = "white";
btn.style.background-color = "transparent";
btn.style.border-color = "white";
btn.style.box-shadow = "0px 0px 0px transparent";
}
}
</script>
</html>
Я даже попытался предупредить сообщение без любая функция, но она не работает !!