Add on click event to a styled button

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!