堆栈内存溢出
  繁体   English   中英

显示不是HTMLButtonElement错误时的功能

[英]Show Is Not A Function At HTMLButtonElement Error

 原文  2019-02-22 01:22:41  9   2    javascript/ html/ mdc

问题描述

我正在遵循此代码库 ，它可以正常工作。 我从中获取代码，并将其放入本地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 个解决方案

解决方案1
 0 已采纳  2019-02-22 02:16:22

与MDC Discord频道上的人交谈之后，似乎.show（）被.open（）取代。

解决方案2
 0  2019-02-22 02:21:48

在代码盘中，您使用的版本为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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我会收到“... is not a function at HTMLButtonElement”错误？ 反应错误：（功能）未在HTMLButtonElement.onclick上定义 得到此错误Uncaught ReferenceError：函数未在HTMLButtonElement.Onclick上定义？ 错误: Uncaught (in promise) TypeError: doc is not a function at HTMLButtonElement。<anonymous> 未捕获的参考错误：function StartOver() 未在 HTMLButtonElement.onclick 中定义 函数未在 HTMLButtonElement.onclick 中定义 函数未在 HTMLButtonElement.onclick 中定义 未捕获的类型错误：{function} 不是 HTMLButtonElement.onclick 处的 function。 我该如何解决这个错误？ 错误出现为“Uncaught TypeError: notesObj.push is not a function at HTMLButtonElement。<anonymous> “。请任何人建议做什么</anonymous> 未捕获的TypeError：链接不是HTMLButtonElement.onclick中的函数
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM