时间戳

首页 > 解决方案 > 使用 Javascript 在网页中吐司 - 未捕获的类型错误：无法在 showSnackbarMessage 处读取 null 的属性“classList”

javascript - 使用 Javascript 在网页中吐司 - 未捕获的类型错误：无法在 showSnackbarMessage 处读取 null 的属性“classList”

问题描述

试图添加当我调用函数时会弹出的 toast 消息，但是，我收到以下错误：

未捕获的类型错误：无法在 showSnackbarMessage 读取属性“classList”的 null

当我在本地浏览器上运行它时，我在控制台上收到一个错误，即 classList 为空，但是，代码似乎在这里工作

function showSnackbarMessage(message, time) {

let snackbar_Div = document.getElementById('snackbar');
snackbar_Div.classList.add("show");

  snackbar_Div.innerHTML = message;
  time=time*1000;//time is in seconds
  // After 2 seconds, remove the show class from DIV
  setTimeout(function(){ snackbar_Div.classList.remove("show")}, time);
};

showSnackbarMessage('Welcome to the page', 2);
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; 
margin-left: -125px; 
background-color: #333; 
color: #fff; 
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed; 
z-index: 1; 
left: 50%; 
bottom: 30px;
}

#snackbar.show {
visibility: visible;

-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-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;}
}

/*----------       End of snackbar       ----------------*/
      <div id="snackbar">Some text some message..</div>

标签： javascript

解决方案

div 尚未加载到 DOM 上，并且在此之前调用了您的方法。classList 不为空，Javascript 只是无法找到该元素，因为它在 DOM 上不存在。

尝试调用 showSnackbarMessagewindow.onload

推荐阅读