Creating a paper button in Polymer using JavaScript

Does anyone know how to successfully implement a Polymer paper button using JavaScript? Here is what I have attempted:

var newPaperButtonElement = document.createElement('paper-button');
    newPaperButtonElement.setAttribute('class','btn');
    newPaperButtonElement.setAttribute('on-tap','{{ test}}');


var newCoreIconElement = document.createElement('core-icon');
    newCoreIconElement.setAttribute('icon','remove-circle');
    newCoreIconElement.setAttribute('class','icon');
    newCoreIconElement.setAttribute('style', 'color: rgba(255, 0, 0, 0.42);')

    newPaperButtonElement.appendChild(newCoreIconElement);

Unfortunately, the function never gets called and nothing happens. Currently using Polymer 0.5...

javascriptpolymerpaper-elements

Answer №1

When creating an element imperatively, remember that you can't add binding imperatively. This means that if you create the element manually, you will also need to add and remove event handlers manually.

newPaperButtonElement.addEventListener('tap', this.test);

The function test may need to be adjusted depending on where it is being used (without proper context from your question).

I believe I have provided the correct syntax, although I primarily use Dart instead of JavaScript.

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

Steps for creating a two-dimensional arc

I want to input some pre-determined acr values from another program and replicate them in three.js Currently, I'm using code I found on this site to draw the arc, although it might not be the most optimal solution. function DRAWarc(){ ...

javascripthtmlthree.js

Creating a versatile menu component: A step-by-step guide

One of my current projects involves designing a menu screen component that must be user-friendly and easily customizable. The component will consist of various options displayed in list form. const options = [ { text: 'Option 1', }, { ...

javascriptreactjs

Unlocking the Secrets of Laravel Blade Integration in a Script File

I am attempting to create a customized store locator application using the guidance provided in this useful tutorial on Google Maps and Laravel 5. While going through various queries related to integrating Google Maps with Laravel, I came across these info ...

javascriptphpgoogle-mapslaravel

Guide to effectively utilizing addEventListener for images

Is it possible to measure the width of an image loaded by user click in Javascript? I need the width in order to adjust the position of a button next to the image. Here is the code I am using: document.getElementById('preIMG').addEventListener( ...

javascriptcssaddeventlistener

Why is npm attempting to compile a previous version of my code?

Being a complete newbie to npm and node.js, I hope you can bear with me if I'm lacking in providing the right details. I am working on developing a plugin for a website that utilizes an out-of-the-box framework within npm. Initially, everything was ru ...

javascriptnode.jsnpm

Ways to troubleshoot the error "push of undefined cannot be read" in Firebug Lite?

While attempting to open Firebug Lite for testing an AngularJS application in Chrome on OS X (Maverick), I encountered an issue. An error message appeared: cannot read property 'push' of undefined firebug-lite.js 30905 What steps can be taken t ...

javascriptangularjsgoogle-chromefirebug-lite

Using NodeJs to pass values to a callback within a condition statement and retrieve the returned value

Within my routing file, I have implemented a condition where an external function is used to compare two values: obj.id === getId. Based on whether this condition evaluates to true or false, the view is rendered, or the user access is blocked. The functio ...

javascriptnode.jsexpresscallback

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

javascriptjqueryhtmlcss

Use jQuery to add a class when a specific element is clicked and then remove that class when another element

Currently, I am working on creating a photo frame designer. One of the features I am trying to implement is that when a pattern is clicked, it fills the text with that pattern. I have managed to do this using the .addClass function. However, I have run int ...

javascriptjquery

Adding a Table Row in jQuery without Appending it to the Bottom of the Table

I am working on a project that involves an HTML Table where the user can add a new Row by clicking a button. However, I want the new Row to be added not at the end of the table, but after the last row of input fields. To demonstrate, I have prepared a sam ...

javascriptjqueryhtml-table

Moment JS initialization and the utc() function

I am trying to comprehend the way Moment JS initializes its moment object. For instance, let's say I want to create a moment for the date and time: April 1, 2000, 3:25:00 AM with a UTC offset of +8 hours from UTC/GMT. To represent this in JavaScript ...

javascripttimemomentjsutc

Using Javascript to hide specific rows in a table

Question for Javascript beginners: I am aware that there are numerous ways to achieve this task, many of which are explained on various platforms. However, my question pertains specifically to the following code snippet. <html> <head> <scri ...

javascriptsharepoint

Combining both the Javascript and PHP components of the Facebook SDK

I recently integrated the JavaScript version of Facebook SDK, but now I'm unsure how to also integrate the PHP version without causing any conflicts. Here are my questions: If I implement the PHP SDK from Facebook, is there a way to detect if the J ...

javascriptphpfacebookfacebook-graph-api

Utilizing Jcrop on an image loaded via ajax

Recently, I've been working on a project that involves uploading profile pictures to a server and storing them in a database using Ajax. While the basic functionality is working fine, I wanted to enhance the user experience by allowing users to crop t ...

javascriptphpjqueryajaximage-uploading

Anomalous Behavior of Strings within Array - Exploring the Expo Application

Although the following lines of code appear to be self-contained and separate from the rest of the project, I can provide more context if needed. Now, let me share with you a bizarre issue that has left me puzzled - even after years of working with JavaScr ...

javascriptnode.jsexpo

Three.js: Wanting to create objects and add motion along a curved path

In an attempt to create a unique effect, I am exploring the idea of spawning a series of objects on a setInterval and assigning each object a customized animation on a path using requestAnimationFrame. I have successfully added one object and animated it a ...

javascriptanimation3dthree.jscurve

Error Encountered: Attempting to access the 'play' property of an undefined object caused a TypeError

I recently tried my hand at creating avatars and animations using readyplay.me and mixamo. For those interested, you can check out the tutorial I followed here: https://dev.to/nourdinedev/how-to-use-threejs-and-react-to-render-a-3d-model-of-your-self-4kkf ...

javascriptthree.jsmixamo

What is the best way to create a countdown timer with React

I've been attempting to create a countdown timer using React. The goal is to count down from 10 to 0 and then trigger a function once it reaches 0. After some searching, I came across an example that seemed ideal for me: https://codesandbox.io/s/0q45 ...

javascriptreactjsreact-hookscountdown

Is it recommended to utilize CDN in Vue.js for optimal performance?

Currently facing a version compatibility issue between leaflet and leaflet-draw in my vuejs project. In light of this, I am seeking alternative solutions for map function editing such as adding polylines, copy and paste functions, and more. While I did com ...

javascriptvue.js

Exploring the intricacies of initializing a JavaScript function

I recently inherited a large JavaScript file from a previous developer, and I'm trying to decipher some of the key sections. Here is the complete code: $(function () { var homepage = (function () { // Main functionalities are defined he ...

javascript