添加一些功能后Javascript不起作用
[英]Javascript is not working after adding some functions
问题描述
I was working on project which required to change background color of webpage when user hover mouse on a textfield and whole webpage theme must change when mouse pointer is on that textfield.
我正在研究当用户将鼠标悬停在文本字段上时需要更改网页背景颜色的项目，并且当鼠标指针位于该文本字段上时，整个网页主题必须更改。 It worked well but when I added a submit button and made a function to change its properties on mouse over and on mouse out, whole Javascript code stopped working!它运行良好，但是当我添加一个提交按钮并创建一个函数来在鼠标悬停和鼠标移开时更改其属性时，整个 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>
I even tried alerting a message without any function but still it didn't work!!我什至尝试在没有任何功能的情况下提醒消息，但仍然没有用！！
2 个解决方案
解决方案1
0 已采纳 2020-02-10 12:43:54
btn.style.transition-duration is going to be the first place where you're getting issues. btn.style.transition-duration将是您遇到问题的第一个地方。 you can't have a dash in a property name just bare like that.您不能像那样在属性名称中使用破折号。 Try changing those properties with dashes in them in another way尝试以另一种方式更改这些带有破折号的属性
btn.style['transition-duration'] may work, I'm not 100% sure, but I am sure that the dashes are creating basically a syntax error. btn.style['transition-duration']可能btn.style['transition-duration'] ，我不是 100% 确定，但我确定破折号基本上是在创建语法错误。
解决方案2
0 2020-02-10 12:44:07
You are assigning values to property that has hyphen in them ( - ).您正在为包含连字符 ( - ) 的属性赋值。 In Javascript, this is not allowed.在 Javascript 中，这是不允许的。
You should change the property assignement that has hyphen ( btn.style.transition-duration = "0.4s"; for example) to use CamelCase instead.您应该更改具有连字符的属性分配（ btn.style.transition-duration = "0.4s";例如）以使用CamelCase 。
btn.style.transitionDuration = "0.4s";
This might fix one of your problems.这可能会解决您的问题之一。 There might be more, but we can't be sure until you tell us if there is any error in the JS console and what they are.可能还有更多，但我们无法确定，直到您告诉我们 JS 控制台中是否有任何错误以及它们是什么。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.