I just got the Developer tools and The Dev documents don’t seem to have an answer. I am trying to attach a js function to a button that listens for a click. Where can I get the button ID for the listener? It does not seem to be the button label. I’m just beginning with js so probably I am missing something obviouse. Thanks!
@khincker, you first need to ask Sparkle to Code Integration, which you can find in Settings / Miscellaneous / Code Integration.
By ticking Code Integration you will notice that when you click on an element and then go to the Arrange Tab (right hand panel) you will find Code Integration at the bottom of the panel. This is where you can give the button a unique ID.
Got it, thanks! Now I have the button registering the event - but only on the second click. If you had a moment to give me feedback on this, I’d be grateful.
document.getElementById(‘myButton’).addEventListener(‘click’, function() {
this.style.backgroundColor = ‘red’;
});
Adding this to a button changes the color, but only the second time I click the button…
Yea, coding is not my strong point so I can’t tell you why your button is only registering on the second click? Maybe Sparkle’s style is overriding your button’s style?
Maybe try it another way by embedding a coded button into Sparkle by using the Embed widget?
I believe we all here are Website designers by using the code free Sparkle tool, the only one who might can help is maybe Duncan (support) itself.
When I have coding questions I often find help on https://stackoverflow.com/questions, you might try your luck there.
Hi @khincker, the developer tools are intended for people who are already web coders, it’s generally straightforward to take a look at the code in the browser web inspector and figure out the issue (if you understand the code).
It’s unclear what you mean with “attach a js function to a button”, if it’s the built-in “Run Javascript Function”, available with the developer tools, that’s designed to already do the button-to-function setup for you, you just need to paste the function body in the inspector. If instead you have added that code in an embed element, it really depends on how you did that.
If you can tell me exactly what you want the button to do - colour change, on click action etc, I can provide you with the code snippet you need to embed. It’s often best not to mix and match how you do these things. the event listener must be there for a reason - not just changing the colour of the button - that can be done in Sparkle. If there is a bigger picture then please provide sufficient information so that we can give you a fully coded solution to embed in your page. For example, to correctly add your button to the page you would embed the following code into your sparkle project - this code includes the button, so no need to set up a separate button on the page.
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('myButton').addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
});
</script>
</head>
<body>
<button id="myButton">Click Me</button>
</body>
</html>
If you really do want to use a button created in sparkle, simply give it an id of myButton and then add this code to the page:
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('myButton').addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
});
</script>
</head>
</html>
You will notice the only difference is that the button has been omitted from the code, so it will work on the named button element you created in Sparkle. However, be aware that using a Sparkle created button could cause conflicts, particularly if you set up an on-click colour change in Sparkle.
1 Like
Thanks for replying. Changing the color of the button is just a test to try to get familiar with the way Sparkle integrates event listeners and code. I used to do a ton of coding in Lua in a specific sdk, but almost nothing for the web. Ultimately the button click will send Meta Pixel events to Facebook when the user clicks.
Now I see that after I’ve got Code Integration active, and I have given my button a unique ID, I should do it all by adding Embedded Content, rather than using the Developer tool, On Click Run Javascript Code. Thank you for your help! The community here is awesome.