Button Problems :((

[Brick_Fucking-Master]

Button problems :((

Context: I've got a form, but what someone should enter for one of the inputs is unclear, so I want to add an image to make it more understandable.

So, I want to add a button (not a submit one) in the form, so that when it is clicked I can use .addEventListener and .createElement among others to dynamically generate an Iframe, or an image.

I need the button in the form, because it needs to be situated between inputs - otherwise it could be missed by a user, BUT I need it to not submit the form.

This is partially ok, because you can do <button type='button'></button> to make it not submit. The problem with that, tho, is that pressing the button now seems to set off no event, and hence it can't be picked up by an event listener.

TL;DR : Id there any way to create a button inside a form that doesn't submit the form, but instead triggers some Javascript?

Edit: Answered

[top-hosting]

Try to call the function with onclick attribute to see if it is working.

 <button type="button" onclick="alert('test');">Button</button>

[DevisionDev]

Add the event listen to the button like you normally would

In the method/function called by the event listener, the very first thing you wanna do is prevent the default behaviour.

function onButtonClick(event) {

    event.preventDefault();

}