add onclick event to button

Hey.

Okay, so you’ll need to name it something other than CODE, as it needs a suffix of some kind to differentiate it. So, let’s say you save your field as CODE1.

In your post/page, where you want the script to be added, then just add {{CODE1}}. That should be it.

Thanks for the fast response! But when I do that my code is displayed as code on the page. I’m sorry I am a beginner! Do I put it somewhere inside the button code or where?

• This reply was modified 4 months ago by lizzydi.

Or is this plugin just to show code? Not to execute?

No, it will execute it.

If you can provide me with a URL of where I can see it, I can advise on what the issue may be.

• This reply was modified 4 months ago by David Artiss.

So as an example i have this html button and added the CODE3 inside the onclick. I also tried with “{{CODE3}}”. Where exactly do I place the CODE3?:

<button id="demo" onclick={{CODE3}}>Click me</button>

and I have the value of CODE3 as:

function myFunction() {
document.getElementById("demo").style.color = "red";
}

So when clicked, the text color of the button should turn red, right? (My actual intention is something else, but I want to test with something simpler.)

• This reply was modified 4 months ago by lizzydi.

Okay, that will insert that Javascript code directly into the HTML page, but it won’t work, as you’ve not added the script tags around it.

So, something like this should work…

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
<script>

Still doesn’t work. Is the CODE3 at the right place (see above)?
usually, I would do this:

<button id="demo" onclick="myFunction()">Click me</button>

where do I put CODE3?

Can you provide a page URL where all of this has been added?

https://futurelearning.space/
I added the Click me button to test everything

Neither piece of code is present on that page – if you look at the Page Source in your browser and look up any of your code it’s not there.

I see, but I dont understand. How can that be? Here is a Screenshot, and i saved everything. Could the theme be interfering? Unfortunately my screenshots dont show

• This reply was modified 4 months ago by lizzydi.

I have no idea, tbh. Try uploading the screenshot elsewhere and then provide a link here to it.

I put the Screenshots on the website underneath the buttons

Okay, I see it now. You’ve put {{CODE3}} into the other bit of code, which I don’t think will work. Go back to what you had before and make the button HTML to be…

<button id="demo" onclick="myFunction()">Click me</button>

Somewhere above that, in the post, just add the line {{CODE3}}. This will add the script which your button code should then be able to run.

But then I have the Problem, that it just shows the code written there, like now. I tried the Code and the Paragraph “Widget”.
Underneath I added a screenshot again

• This reply was modified 4 months ago by lizzydi.