在HTMLButtonElement错误时显示不是函数

问题描述 投票：0回答：2

我正在关注完美的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中，这应该如何工作？

javascript html mdc
2个回答
0
投票

在与MDC Discord频道上的人交谈之后，似乎.show（）被替换为.open（）。

0
投票

在代码中你使用的是版本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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.