Question

我正在尝试使我的自定义警报淡入和淡出。我正在通过在烤面包机div中添加和删除类“ show”来更改其可见性。它会逐渐消失，但会暂时消失，然后立即再次出现。使用inspect元素，它表明它遇到了此错误：

job-application-form.php：463未捕获的TypeError：无法读取未定义的属性'classList' 在job-application-form.php：463

位于功能setTimeout(function(){ cont.classList.remove("show")}, 3000);上且未从div中删除“ show”类的地方。

我不明白为什么会收到此错误或如何解决该错误。请帮忙。

Div

<div id="toast-container" class="toast-top-right"><div  id="toast-type" class="toast" aria-live="assertive" style=""><div id="snackbar">message</div></div></div>

功能：

<script> 
  function Toast(message, messagetype) 
  {
     var cont = document.getElementById("toast-container").classList.add("show");
     var type = document.getElementById("toast-type");
     type.className += " " + messagetype;
     var x = document.getElementById("snackbar");
         x.innerHTML = message;
     setTimeout(function(){ cont.classList.remove("show")}, 3000);
  }
</script>

php中的函数调用

$Toast = "We have <strong>successfully</strong> received your message and will get back to you as soon as possible.";
        $Error = "toast-error";
        $Success = "toast-success";
        echo "<script type='text/javascript'>Toast('$Toast', '$Success');</script>";

CSS：

#snackbar { 
  word-wrap: break-word;
}

#toast-container {
    visibility: hidden;
    position: fixed;
    z-index: 999999;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#toast-container.show {
    visibility: visible;
}

#toast-container * {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

.toast-top-right {

    top: 12px;

    right: 12px;

}

#toast-container > div {

    position: relative;

    pointer-events: auto;

    overflow: hidden;

    margin: 0 0 6px;

    padding: 20px 25px;

    width: 300px;

    -moz-border-radius: 3px 3px 3px 3px;

    -webkit-border-radius: 3px 3px 3px 3px;

    border-radius: 3px 3px 3px 3px;

    background-repeat: no-repeat;

    -moz-box-shadow: 0 0 12px #999999;

    -webkit-box-shadow: 0 0 12px #999999;

    box-shadow: 0 0 12px #999999;

    color: #FFFFFF;

    opacity: 0.8;

    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

    filter: alpha(opacity=80);

}

.toast {

    background-color: #030303;

}

.toast-success {

    background-color: #51A351;

}

.toast-error {

    background-color: #BD362F;

}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

Answer 1

问题出在变量cont中，该变量未正确初始化。

更改此行：

public string AddWordToFile(string word)
    {
        using (StreamWriter writer = new StreamWriter(fs.ToString(), append: true))
        {
           //bool ExistsInFile = false;
            for (int i = 0; i < words.Length; i++)
            {
                if (words.Contains(word))
                {
                    //ExistsInFile = true;
                    return "The word '" + word + "' already exists in the textfile.";
                }
            }
            if (!words.Contains(word))
            {
                //ExistsInFile = false;
                writer.WriteLine("," + word);
                writer.Close();
                return word + " added.";
            }
            else
            {
                return "Whoops, something went wrong :'I";
            }
        }              
    }

对此：

var cont = document.getElementById("toast-container").classList.add("show");

Answer 2

Dean Strydom，您快到了。实际上，错误消息准确地描述了问题。

var cont = document.getElementById("toast-container").classList.add("show");
在这一行中，您希望 cont 是烤面包机，但事实并非如此。这是 classList.add 的结果，它只是 undefined 。

此时，您再次使用cont来删除show类，它将尝试从实际上是classList的{{1}}访问cont

总之，

undefined

这是一个正在运行的代码段。修改以提示单击按钮。希望这可以帮助您更好地理解问题。只是在样式/动画周围玩。

var cont = document.getElementById("toast-container");  // simply save this element first
cont.classList.add("show");  // then manipulate afterwards

let animating = false;

function Toast(message, messagetype) {
  var cont = document.getElementById("toast-container");
  cont.classList.add("show");  // correct manipulation
  var type = document.getElementById("toast-type");
  type.className += " " + messagetype;
  var x = document.getElementById("snackbar");
  x.innerHTML = message;
  setTimeout(function() {
    cont.classList.remove("show");  // access it again here
    animating = false;
  }, 3000);
}

let btn = document.querySelector('button');
btn.addEventListener('click', function(e) {
  if (animating) {
    return;
  }
  animating = true;
  Toast("hi there", "toast-success");
});

#snackbar {
  word-wrap: break-word;
}

#toast-container {
  visibility: hidden;
  position: fixed;
  z-index: 999999;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#toast-container.show {
  visibility: visible;
}

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

#toast-container>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 20px 25px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

.toast {
  background-color: #030303;
}

.toast-success {
  background-color: #51A351;
}

.toast-error {
  background-color: #BD362F;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

https://codepen.io/aldnav/pen/gqbEQE

Answer 3

cont未引用您要查找的元素。 classList.add("show")不返回任何内容，在JavaScript中，如果函数未明确返回任何内容，则该函数默认返回undefined。因此，该变量实际上包含undefined，您会收到错误。

尝试以下操作：

<script> 
  function Toast(message, messagetype) 
  {
    var cont = document.getElementById("toast-container")
    cont.classList.add("show");
    var type = document.getElementById("toast-type");
    type.className += " " + messagetype;
    var x = document.getElementById("snackbar");
    x.innerHTML = message;
    setTimeout(function(){ cont.classList.remove("show")}, 3000);
  }
</script>

问题演示：

var cont = document.getElementById("toast-container").classList.add("show");
console.log(cont);

.show{
  color: red;
}

<div id="toast-container">Test Container</div>

自定义提醒淡入但不会淡出

3 个答案: