Hello Softr community!
I’ve just started using Softr and I’m totally new to coding. I’ve been trying to add some custom logic in a custom code block into my website.
I want to add an on click event to a styled button in a custom code block, but I can’t find the resources to help me.
Would anyone be able to point me in the direction of documentation or examples?
If you post what you’ve got I can give you some sample code for adding the event handler.
Thank you! For now, I just want this to log to the console.
<style>
button#generate-button {
/* Style the button */
border: 1px;
color: white;
padding: 20px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Source Serif Pro;
margin: 10px 5px;
cursor: pointer;
background-color: #DAE2E5;
/* Add a hover effect */
transition: background-color 0.3s;
}
button#generate-button:hover {
background-color: #b1d7e7;
}
</style>
<div class="w-100 text-center">
<p class="h6"><button id="generate-button">Click Here</button></p>
</div>
<script>
const button = document.querySelector('#generate-button');
button.addEventListener('click', function() {
console.log("here");
});
</script>
This seems to work for me, in that when I click on “Click Here” I see the “here” message in the console. What am I missing?
Oh! I’ve been trying on Preview (it’s not published yet). Do you know if the console still works when previewing?
Yes, I see the message in the console when running in Preview as well. If you don’t see the message in the console, can you post a screen recording?
I got it working. Appreciate your help and time!