Я слежу за этим кодом , который работает отлично.Я взял код из этого и поместил его в мой локальный файл HTML и добавил JS.Однако, когда я запускаю его локально, это не работает.Консоль выводит следующее сообщение:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
Мой код HTML и JS выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Почему это не работает локально?
ОБНОВЛЕНИЕ Согласно моему комментарию, версия 0.28 Javascript MDC работает с этим кодом.Появятся диалоговые окна.Итак, вопрос в том, как в последней версии MDC Javascript это должно работать?