Polymorph 1.0 - Using CSS Class Binding for Dynamic Properties

I attempted to link a CSS Class to a paper-progress element using the value of my property to change the item's color. I referenced Polymer's example on GitHub and studied the documentation on Data-binding.

Here is my code: http://jsbin.com/bidebe/10/edit?html,output

The class of the paper-progress successfully changes, but the color does not. When I apply the color class directly, the color displays correctly.

I am puzzled as to why the correct class for paper-progress is being assigned but not affecting the color. Any help in understanding this would be greatly appreciated. Thank you.

javascriptcsspolymer

Answer №1

If you're looking for some assistance, this information might be useful to you.

     attached: function () {
            this.async(function () {
                var progressBars = this.querySelectorAll('paper-progress'); // selecting all paper-progress elements
                var i = 0;
                var j = progressBars.length;

                var color;
                var secondaryColor;
                var progressBar;
                var difficulty;
                while (i < j) {
                    progressBar = progressBars[i];
                    difficulty = progressBar.value;
                    if (0 <= difficulty && difficulty <= 4) {
                        color = 'red';
                        secondaryColor = "green";
                    } else if (4 < difficulty && difficulty <= 7) {
                        color = 'green';
                        secondaryColor = "red";
                    } else if (7 < difficulty && difficulty <= 10) {
                        color = 'yellow';
                        secondaryColor = "green";
                    }
                       // setting and updating colors
                    progressBar.customStyle['--paper-progress-active-color'] = color;
                    progressBar.customStyle['--paper-progress-secondary-color'] = secondaryColor;
                    this.updateStyles();
                     i++;
                    }
                });
            },

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

Receiving constant errors on Search Input in React: continuously encountering the error "Cannot read property 'value' of undefined."

Attempting to incorporate the < ChipInput /> element from https://github.com/TeamWertarbyte/material-ui-chip-input. Using material-UI react component, my current setup includes: A functional search input bar. When an artist's name is typed, it ...

javascriptreactjsmaterial-uijsx

Error message: Unable to suggest as Typeahead.js does not recognize the function

After struggling extensively with Twitters typeahead.js, I have finally reached the point where I need to choose a template for my suggestions. However, when attempting to do so, I encountered the following error: Uncaught TypeError: g.templates.sugges ...

javascriptjqueryangularjstypeahead.js

animation of several rows in a table with ng-animate is not feasible

I'm working on highlighting items when they appear in a table. There might be multiple items appearing simultaneously, but it seems like ng-animate is not handling this situation correctly. In the provided example below, you can observe that the div ...

javascriptangularjsng-animate

What is the most effective method for displaying a child modal within a map?

Project link: Check out my project here! I have two key files in my project - App.js and PageFive.js. In App.js, there is an array defined as follows: state = { boxes: [ { cbIndex: "cb1", name: "Bob" }, { cbI ...

javascriptreactjsbootstrap-4reactstrap

How to retrieve JSON data from a node.js server and display it in HTML

Attempting to develop a web app featuring drop-down menus that display data from a SQL server database. After researching, I discovered how to utilize Node.js to output table data in the command prompt. var sql = require('mssql/msnodesqlv8'); ...

javascriptnode.jsjson

What is the importance of using $scope.$apply after assigning values to ng-model within forms?

Let's talk about a form: <form name="placeThis" id="placeThis" novalidate ng-submit="submitForm();"> <input type="hidden" ng-model="placeThis.target"/> </form> My goal is to assign a default value to placeThis.target from my co ...

javascriptangularjs

A guide on updating the values of an array of objects using a different array

As a newcomer to the world of JS, I hope you can bear with me if my question seems complex and possibly repetitive. This issue has been bothering me for quite some time now without finding a satisfactory answer or solution. I have an array of Objects wher ...

javascriptarraysjavascript-objects

The 'substr' property is not found in the type 'string | string[]'

Recently, I had a JavaScript code that was working fine. Now, I'm in the process of converting it to TypeScript. var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; if (ip.substr(0, 7) == "::ffff ...

javascriptnode.jstypescript

Transferring Session ID between Express.js and Socket.io while dealing with iframes from distinct origins

My Node application built with Express.js and Socket.io is facing an issue where they are not sharing the same session ID when running under iframe with different origins. When accessed directly or through iframes with the same origin, everything works fin ...

javascriptnode.jsexpresssocket.ioexpress-session

Using R plotly to show an image when hovering over a location on a map

After successfully implementing the technique of displaying an image on hover in a regular R plotly chart, I encountered issues when trying to apply the same method to a plotly map. Specifically, the approach broke down and failed to display the image. Can ...

javascriptrplotlyinteractive

`Generating dynamic content based on ajax response``

Hey there! I've got a little challenge on my hands. I've set up 3 input boxes that act as table cells (the header). When the input in one of these boxes changes, a script runs. This script triggers a function that pulls data from my database thro ...

javascriptjqueryjsonajax

jQuery returns varying values for checked status when using click() method versus manual click

I'm facing an issue with a checkbox generating dynamic content. Whenever I try to pre-create the dynamic content on page load by using click(), the "checked" attribute is not set until after the click function finishes. Strangely, when I manually cli ...

javascriptjquery

The Issue of Anti Forgery Token Not Functioning Properly with Ajax JSON.stringify Post

I have been attempting to utilize an Anti Forgery token with JSON.stringify, but despite researching multiple sources, I have not been successful. Below is my AJAX code for deleting some information without any issues. Upon adding the anti forgery token, I ...

javascriptajaxasp.net-mvcjsonjquery

Update the month in the second date picker to align with the selection made in the first date picker within the Angular framework

Is it possible to dynamically change the month of the second datepicker based on the selection made in the first date picker? Currently, it is displaying the current date by default. For example: If I select 15-10-2104 from the first date picker, the secon ...

javascriptangularjsdatedatepickerbootstrap-datepicker

Error encountered in Jest (a testing tool for React) - Parse Error: Line 1 contains an invalid import declaration

Currently, I am utilizing node.js version 0.10.x and jest version 0.4.x to conduct tests on react.js. Prior to testing my react components, I was utilizing node.js version 0.12.x. I switched to version 0.10.x using nvm. I proceeded to rebuild all modules ...

javascriptnode.jsunit-testingreactjsjestjs

Tips for dynamically updating JSON key values and its nested keys using JavaScript

Currently, I am retrieving a JSON from an endpoint and attempting to store it in my mongoDB database. However, I am encountering an issue with keys that contain a "." within them, as mongoDB throws an error when trying to insert such keys. For instance: o ...

javascriptnode.jsmongodbnosqlkey-value

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Creating a scrollable element in Tailwind without the need for a scrollbar is easier than you think

Is there a way to create a horizontal scroll navbar using Tailwind CSS without a scrollbar at the bottom, similar to this example (try reducing the width of your screen to see the scroll effect)? https://getbootstrap.com/docs/5.0/examples/blog/ I attempt ...

cssbootstrap-4tailwind-cssbootstrap-5

Obtaining a background image within a keyframe

I have been experimenting with keyframe animations and am looking to incorporate multiple images into the animation. Specifically, I want to switch out the image every 10% increment to depict someone running. Despite my efforts to use a background-img in ...

htmlcsscss-transitionscss-animations

Introducing Laravel 6's Hidden Gems: Unleash the Power of @push

Hey everyone, I'm a newcomer to the world of Laravel and currently using Laravel 6.0 I've encountered an issue with my javascript code that utilizes @push. Strangely enough, the script only functions properly when I manually insert the code into ...

javascriptphplaravel-6