添加一些功能后 Javascript 无法正常工作答案

【问题标题】：Javascript is not working after adding some functions添加一些功能后 Javascript 无法正常工作
【发布时间】：2020-05-25 18:52:39
【问题描述】：

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

我什至尝试在没有任何功能的情况下提醒消息，但它仍然不起作用！

【问题讨论】：

你的 JS 控制台有什么错误吗？ (F12)
什么不起作用？您是否在开发工具控制台中遇到任何错误？
btn.style.transition-duration 将是您遇到问题的第一个地方。您不能像这样在属性名称中使用破折号。尝试以另一种方式更改带有破折号的属性
当我将鼠标悬停在文本字段上时，它正在改变 bg 颜色（这包含在 bgChange 函数中）但是在添加发光功能后，即使 bgChange 函数也停止工作！就像javascript代码没有效果一样！
与btn.style = ... 一起应用每种样式，您可能更容易使用document.body.classList.add('text-hovered') 管理样式，然后在您的CSS 中添加body.text-hovered #btn { border-color: white; ... } 之类的规则集。

标签： javascript html css dom events

【解决方案1】：

您正在将值分配给其中包含连字符 (-) 的属性。在 Javascript 中，这是不允许的。

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

btn.style.transitionDuration = "0.4s";

这可能会解决您的一个问题。可能还有更多，但在您告诉我们 JS 控制台中是否有任何错误以及它们是什么之前，我们无法确定。

【讨论】：

【解决方案2】：

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

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

【讨论】：