How to link js function to html element

I have the following two javascript functions:
const jokeGenerator = () => jokes[Math.floor(Math.random() * jokes.length)]
const addJoke = (joke) => jokes.push(joke)
where jokes is an array

I want the first function to be a button, so that when the button is clicked a random joke is retrieved.
I want the second function to be a form, where the input is added to the jokes array.

How do I link each individual function to the html button/form?

You need to add an event listener to your button (from your js, which means you need to query the html from the js to get the button object). Reading mdn docs on this is usually very helpful:

1 Like

I did the module after the mixed messages project, which told me what i needed to know. element.onclick = function().

Perhaps this module should go before mixed messages, seeing as it contains very useful information? Thanks for the feedback

It really is a toss-up with order sometimes. And there are often multiple ways to do something (in regards to button functionality).