显示不是HTMLButtonElement错误时的功能

时间：2019-02-22 01:22:42

标签： javascript html mdc

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

2 个答案:

答案 0 :(得分：0)

在MDC Discord频道上与他们交谈之后，似乎.show（）被.open（）取代了。

答案 1 :(得分：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>

相关问题
最新问题