Question

我正在研究一个项目，当用户将鼠标悬停在文本字段上时，该项目需要更改网页的背景色，而当鼠标指针位于该文本字段上时，整个网页主题必须更改。效果很好，但是当我添加一个提交按钮并创建一个函数来更改鼠标悬停和鼠标悬停时的属性时，整个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>

我什至尝试警告没有任何功能的消息，但仍然无法正常工作！

Answer 1

btn.style.transition-duration将是您遇到问题的第一个地方。像这样裸露的属性名称中不能包含破折号。尝试以其他方式更改其中带有破折号的属性

btn.style['transition-duration']可能有效，我不确定100％，但是我确信破折号基本上会造成语法错误。

Answer 2

您正在为其中带有连字符（-）的属性分配值。在Javascript中，这是不允许的。

您应将具有连字符（例如，btn.style.transition-duration = "0.4s";）的属性分配更改为使用CamelCase 代替。

btn.style.transitionDuration = "0.4s";

这可能会解决您的问题之一。可能还有更多，但是直到您告诉我们JS控制台中是否有错误以及它们是什么，我们才能确定。

添加某些功能后，JavaScript无法正常运行

2 个答案: