Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Joel Madasu
2,717 PointsJavascript widget code to HTML Button
How can I link a Javascript widget code to an HTML Button? I am using accounting software that gives the widget code. It's just that the "button" that comes with the code is plain, grey and almost dead looking. I have a button (attractive one), and when someone clicks on the button, I want the click to call the script and the script/widget pops up. How can I do this? Thank you.
6 Answers
Steven Parker
229,732 PointsYou can reference your button and call the "addEventListener" method to cause clicking it to run a function associated with your widget. There should be something similar in the code already to start the widget from the plain button.
Joel Madasu
2,717 PointsYes, I did. What should I do? I am not sure how safe it is to share the code here since that is linked to my accounting software and don't know if that will reveal account numbers, etc. So...
Steven Parker
229,732 PointsBasically, you need to look over the existing code and find where the the existing button is tied into the functionality so you can replace the references with ones to your improved button.
To get more specific help, you'll need to figure out how to identify and redact any PII so you can show the actual code.
Joel Madasu
2,717 Points@Steven Parker ... This is just BEYOND me. :) I use a donate button widget on my website (build on WordPress). That button looks dead. No life in it, and I do not think any donor would feel compelled to click on it. I cannot upload the screenshot here, but you would get an idea if you see it. So, the software company gave a basic code (barebone) button so coders can alter it and make it match their website look and feel. I cannot get this to work.
This is how the code looks:
<button class="aplos-donation-button" data-widget-id="************....................................">Donate</button> <script type="text/javascript" src="^**^**^^*^*^*^*^*^*^*^*^*^*^.min.js"></script>
Joel Madasu
2,717 PointsHere is the code Aplos gives:
<button class="aplos-donation-button" data-widget-id="B56D325481DE46559FFA613A1E91FB90">Donate</button> <script type="text/javascript" src="https://cdn.aplos.com/widgets/donations/1.0.2/donations.min.js"></script>
Steven Parker
229,732 PointsI notice that the button response code only works for buttons that are enclosed in an iframe element having an id of "aplos-donation-frame", but the HTML snippet shown here is too small to confirm that.
If you can't put the entire project in a repo or workspace, what might help is to:
- provide a (publicly accessible) link to the original page with the working but ugly button
- put up a publicly accessible page with your new but non-functional button
Joel Madasu
2,717 PointsHere is the link. Both buttons will be right next to each other - the ugly one that I have to center it manually, and a pre-styled button. The Aplos customer service says that the ugly bare-bones one "can" be modified. I just don't know how.
Link for the page: https://www.gospelheritageministries.org/ghmspecialrequest/
Steven Parker
229,732 PointsIf you mean the "Give to GHM Projects!" button by the plain "Donate" button in the green area near the page bottom, both of those buttons open the "powered by Aplos" dialog widget for me. Maybe I'm not understanding what it is that isn't working correctly?
Joel Madasu
2,717 PointsThey do work. My question to start this conversation is how to make a custom button that would call javascript. In this case, the script of Aplos button. The ugly looking one is a barebone button that can be modified. However, I am not able to modify the button. It doesn't match the rest of the page. It doesn't look good. In order to have a potential donor click on it, it must at least look decent. The other blue button you see is a pre-styled button by Aplos. None of these can be modified or centered, etc. Now, check the link again. I added a custom ThriveTheme/Architect button that can be modified however I like. In the first place, I want to add or make it possible to call the script and so the Aplos popup when one clicks on the custom button. For that, I was told that I need to add eventlistener? No clue how to do that. So, based on what I just said, is there any way you can help? https://www.gospelheritageministries.org/ghmspecialrequest/
Steven Parker
229,732 PointsSee the suggestion I added to my answer.
Joel Madasu
2,717 PointsJoel Madasu
2,717 PointsThank you for your help! I wish I know how to reference and call the "addEventListener" method. :)
Steven Parker
229,732 PointsSteven Parker
229,732 PointsHave you looked at the part of the existing code that responds to the ugly button?
Steven Parker
229,732 PointsSteven Parker
229,732 PointsThere's still not much here for me to be able to help with. But I can pass along some observations:
To be of further help, you will need to post the whole code after redaction. You cannot redact the entire script as parts of it involved with displaying or using the button will be necessary to replicate the issue.
The best way to share the code/environment is in a link to a workspace snapshot or something like a github repo.
Steven Parker
229,732 PointsSteven Parker
229,732 PointsYou might not need additional JavaScript code. Try coding the button using the same tags and attributes of the buttons that already work. Perhaps something like this: