Start the initialization process of the Javascript code for Material Design WEB

Currently, I am utilizing Material Design WEB components in my project.

Below are the CSS and JS files that have been included:

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

In a separate JS file, I have attempted to:

const textField = document.querySelector('.mdc-text-field');
mdc.textField.MDCTextField.attachTo(textField);

const button = document.querySelector(".mdc-button");
mdc.ripple.MDCRipple.attachTo(button);

const formField = document.querySelector('.mdc-form-field');
const checkbox = document.querySelector('.mdc-checkbox');
mdc.formField.input= checkbox;

The issue I am facing is that when there are two text boxes in the HTML, it only works for the first element and not for others. Additionally, the checkbox functionality is not working at all.

<label class="mdc-text-field mdc-text-field--outlined">
                    <input type="text" class="mdc-text-field__input" asp-for="Username" autofocus aria-labelledby="user name">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" asp-for="Username">User Name</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                </label>


<label class="mdc-text-field mdc-text-field--outlined">
                    <input type="password" class="mdc-text-field__input" asp-for="Password" aria-labelledby="password">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" asp-for="Password" autocomplete="off">Password</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                </label>

If you want to check out an image of the issue, click here.

I am looking for guidance on where I can find a list detailing how to instantiate JavaScript like this:

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
javascripthtmlcssmaterial-design

Answer №1

By placing the data-mdc-auto-init attribute on the root element, I was able to achieve the desired result.

<button class="mdc-icon-button" 
   aria-label="Add to favorites"
   aria-pressed="false"
   data-mdc-auto-init="MDCIconButtonToggle">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

This code snippet should be placed at the end of the page:

<script>mdc.autoInit()</script>

For more information, please visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I use to integrate a Google HeatMap into the GoogleMap object in the Angular AGM library?

I am trying to fetch the googleMap object in agm and utilize it to create a HeatMapLayer in my project. However, the following code is not functioning as expected: declare var google: any; @Directive({ selector: 'my-comp', }) export class MyC ...

javascriptangulargoogle-mapstypescriptheatmap

Start by creating a set of vertices and triangles to be utilized by the vertex shader

After experimenting with vertexshaderart.com, I'm eager to apply what I've learned on a different website. While I have experience using shaders in the past, some effects achieved on the site require access to vertices, lines, and triangles. Pass ...

javascriptthree.jsglslwebgl

Submission of the form was cancelled, causing a loop to occur

I'm encountering an issue with submitting a file through a standard HTML form. After uploading the file, the process seems to get trapped in a continuous loop where the file keeps uploading repeatedly. The submission of the form is done using jQuery, ...

javascriptjqueryhtmlgoogle-chromesetinterval

How should one correctly trigger an event in Google scripts?

When it comes to calling in the active elements, I have been using event.source.getActive and SpreadsheetApp.getActive. However, I have noticed that I sometimes interchange them in my script and face issues. So, I am unsure about which method is more app ...

javascriptgoogle-apps-scriptdom-events

"Tips for positioning the center of a map with the help of external latitude and longitude

I have developed a program that extracts an address from a database. To obtain the latitude and longitude of the address, I utilized geocoder (https://www.npmjs.com/package/geocoder). Now, every time I click a button to retrieve the address, I want the map ...

javascriptreactjsgoogle-mapsgoogle-maps-api-3

Converting JavaScript code to jQuery and integrating it into a WordPress website has become a common practice

I recently developed a working javascript function as shown below: function calc(A,B,SUM) { var one = Number(A); var two = Number(document.getElementById(B).value); if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } if (isNaN(tw ...

javascriptjquerywordpress

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

c#htmlhtml-agility-pack

Encountering an unexpected Action Controller error while using Rails 4 and implementing unobtrusive JavaScript with AJAX requests

My current setup looks like this: In the uploads_controller.rb file: class UploadsController < ApplicationController before_action :set_upload, only: [:show, :edit, :update, :destroy] # GET /uploads def index @uploads = Upload.all ...

javascriptruby-on-railsajaxunobtrusive-javascriptactioncontroller

Tool for obfuscating client-side files using node.js

I'm in search of a tool similar to the one found at but in the form of a node.js module, allowing for obfuscation of client-side js files prior to transmission. The tool mentioned above performs various tasks, with its most crucial function being th ...

javascriptnode.jsobfuscation

Issue with disabling checkboxes in jsTree

Currently utilizing the latest version of jsTree in one of my applications. I would like to have specific checkboxes disabled by default. To achieve this, I am referencing this resource. The jstree code I am using is as follows: $("#"+"div_"+aspectid).js ...

javascriptjquerycheckboxjstree

provide a promise that resolves to a boolean value

Below is the code I have: const executorFunction = (resolve, reject) => { <script> if ( 1==1){ resolve(true); } else{ resolve(false); } } const myFirstPromise = new Promise(executorFunction); console.log(myFirstPro ...

javascriptnode.js

Mongoose is struggling to locate the expected result

I currently have three different schemas set up. User.js: const mongoose = require("mongoose"); const bcrypt = require("bcryptjs"); const userSchema = new mongoose.Schema({ name: { type: String, required: true, }, email: { type: String, ...

javascriptnode.jsmongodbexpressmongoose

Error when redirecting in Express due to invalid integer input syntax

After executing a PUT query in Postgres through Express, I encountered the following error message: Error: invalid input syntax for integer: "all-calls" This issue seems to be related to the line of code within the router.put function that says response. ...

javascriptnode.jsexpress

Discrepancies in rounding calculations between three.js on Chrome and Firefox

In my three JS scene, I have a plane positioned and rotated in a certain way. When I send a raycast towards this plane and project an object onto it, everything works perfectly fine in chromium but gets turned upside down in firefox. This discrepancy is c ...

javascriptthree.js

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

I'm having trouble getting the drag event to work for Three.js trackball controls within a UIkit

The issue at hand involves a fullscreen Three.js canvas that is functioning perfectly, but there are limitations when displaying a preview in a UIkit modal – zooming works, but panning does not. JS: Renderer and Controls renderer = new THREE.WebGLRende ...

javascriptthree.jsuikit

Tips for transferring this text to a new line

I have come across this text that needs to be moved to a new line, This is its current appearance, Here is how I want it to look: HTML code snippet: <div id="content"> <div id="header"> <p> <img class="header-im ...

htmlcss

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

htmlcss

Loading time for page style can be slow when using Next Js

When the user opens or reloads the page, there is a delay in loading the style of the page. I am relatively new to working with next js and still learning the core abilities of the framework. This GIF illustrates the slow loading time when opening or relo ...

javascriptreactjswebfrontendnext.js

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...

cssreactjs