我正在处理材料设计，正在处理表格。
我想在数据库中发送表单时显示带有吐司的弹出窗口。
文档：Toast Material Desing
我已经尝试创建如下功能：
<script>
function test() {
var notification = document.querySelector('.mdl-js-snackbar');
console.log(notification);
notification.MaterialSnackbar.showSnackbar(
{
message: 'Image Uploaded'
}
);
}
test();
</script>
我定义了我的小吃店：
<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised " type="button" onclick="test()">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button" ></button>
</div>
我想在页面加载时显示吐司，但是我发现一个错误：
Uncaught TypeError: Cannot read property 'showSnackbar' of undefined
at test
但是与此同时，我可以使用控制台调用该函数，并且可以完美运行。
我该怎么做才能在页面加载中吐司，我错过了什么？
谢谢
最佳答案
问题是该函数运行时未加载材料，
看这个例子：
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</body>
<script>
r(function(){
var notification = document.querySelector('.mdl-js-snackbar');
notification.MaterialSnackbar.showSnackbar(
{
message: 'and..working!!'
}
);
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</script>