我正在研究一个项目，当用户将鼠标悬停在文本字段上时，该项目需要更改网页的背景色，而当鼠标指针位于该文本字段上时，整个网页主题必须更改。它运行良好，但是当我添加一个提交按钮并创建一个函数来更改其属性时，鼠标悬停和鼠标悬停时，整个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>
我什至尝试警告没有任何功能的消息，但仍然无法正常工作！
btn.style.transition-duration将是您遇到问题的第一个地方。像这样裸露的属性名称中不能包含破折号。尝试以其他方式更改其中带有破折号的属性
[btn.style['transition-duration']可能有用，我不确定100％，但是我确定破折号基本上会造成语法错误。
您正在为其中带有连字符（-）的属性分配值。在Javascript中，这是不允许的。
您应该更改带有连字符的属性分配（例如btn.style.transition-duration = "0.4s";）以使用CamelCase代替。
btn.style.transitionDuration = "0.4s";
这可能会解决您的问题之一。可能还有更多，但是直到您告诉我们JS控制台中是否有错误以及它们是什么，我们才能确定。
请先使用jQuery ready函数在jquery中正常工作。
$( document ).ready(function(e) {
-- all functions --
});