在 HTMLButtonElement 错误处显示不是函数

Question

我正在关注 this codepen，它运行良好。我从中取出代码并将其放入本地 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>

为什么这在本地不起作用？

更新根据我的评论，MDC Javascript 的 0.28 版适用于此代码。出现对话框。所以现在的问题是，在最新版本的 MDC 中 Javascript 这应该如何工作？

Answer 1

在与 MDC Discord 频道的人员交谈后，似乎 .show() 已替换为 .open()。

Answer 2

您在codepan中使用的是0.28版本。这是最新版本的示例。

<!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.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
  dialogDelivery.open();
});


</script>

</body>

在 HTMLButtonElement 错误处显示不是函数

Show Is Not A Function At HTMLButtonElement Error

html

javascript

mdc