material-components-web
material-components-web copied to clipboard
[Question] Do you have any example of button or ripple implement by plained javascript?
Hi,
Do you have any example of button or ripple implement by plained javascript?
I want to add event 'click' to ripple but there is an error.
Below is html file
<button class="btn-open mdc-button mdc-button--raised" type="button"> <span class="mdc-button__ripple"></span> <span class="mdc-button__focus-ring"></span> <i class="material-icons mdc-button__icon" aria-hidden="true">login</i> <span class="mdc-button__label">Open</span> </button>
Below is javascript file.
` import { MDCRipple } from '@material/ripple/index'; import { MDCTextField } from '@material/textfield'; import { MDCSelect } from '@material/select'; import { MDCTopAppBar } from '@material/top-app-bar';
// Instantiation const topAppBarElement = document.querySelector('.mdc-top-app-bar'); export const topAppBar = new MDCTopAppBar(topAppBarElement);
export const ripBtnOpen = new MDCRipple(document.querySelector('.btn-open')); export const txtPassNo = new MDCTextField(document.querySelector('.txt-pass-no')); export const txtPassCode = new MDCTextField(document.querySelector('.txt-pass-code')); export const selChannel = new MDCSelect(document.querySelector('.select-channel'));
ripBtnOpen.addEventListener("click", () => { console.log("Press open"); }); `
Below is an error 'Uncaught TypeError: ripBtnOpen.addEventListener is not a function'
