material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[Question] Do you have any example of button or ripple implement by plained javascript?

Open jatu-studiobox opened this issue 3 years ago • 0 comments

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'

2022-10-25_180340

jatu-studiobox avatar Oct 25 '22 11:10 jatu-studiobox