Button necessary for eventlistner?


I’m trying to integrate JS on my own page. As an exercise.
So i try to create an eventlistner on a <div></div>.

This doesn’t seem to be working. When I look at the theory, they only use buttons to creat eventlistners.

Can you only make eventlistners on buttons or should they also work when you put them on for instance a complete div of your page?

Thanks for your feedback,



A div can have event listeners too. If your <div></div> is completely empty and you don’t have CSS rules to give it a width and height, then it may be impossible to click though.

If your <div></div> has something nested inside to give it a size, then it would work. Otherwise, you could use CSS to give it a width and height to make it work.

1 Like


My div is specified bij class in css en has a specifief backgroundcoloren text-align. Than a width of height is not necessary anymore if I understand you correctly? Or does ist always require width and height aswell?

So if this doesn’t work I have made a mistake elswhere?

The text in it is only marked by “< h 1 >” “< / h 1 >”, so that could be an issue.
good feedback, thank you!



1 Like

it’s probably a lot easier to help you if we see how you are implementing that code. Would you mind sharing?


this is the part in my html:

        <div id='beforefooter' class="beforefooter">
           <h1 id='copyh1toseparate' class="copyh1toseparate">Stopt doubting and start running today</h1>

just before my bodyend you can find:

"<"script src="script.js" defer></script">"

my css rules for this:

    background-color: darkslategray;
    text-align: center;
    font-family: 'Montserrat Subrayada', sans-serif;
    color: whitesmoke;

This is the javascript code:

let textcolor = document.getElementById('copyh1toseparate');
let boxaroundtext = document.getElementById('beforefooter');

function colorValue() {
    return Math.floor(Math.random() * 256);
  function colorChange(event){
    let randomColor = 'rgb(' + colorValue() + ',' + colorValue() + ',' + colorValue() + ')';
    event.target.style.backgroundColor = randomColor;

  function textColorChange(event){
    let randomColor = 'rgb(' + colorValue() + ',' + colorValue() + ',' + colorValue() + ')';
    event.target.style.color = randomColor;

//eventlistners DOM

boxaroundtext.addEventListener('wheel', colorChange());
textcolor.addEventListener('wheel', textColorChange());

Everything is in the same map for now.

thanks for your help!



That’s awesome. If you don’t mind the edit, could you check this out: How do I format code in my posts? for future reference?

It makes the code much easier to read :smiley: (you basically want to encapsulate everything with a triple backtick ` before and after the code block)

1 Like

Since you included the parenthesis, you’re calling the function rather than passing the function to be used in the future.

Your page after changing colorChange() to colorChange:

1 Like

You guys are amazing, thank you so much!!

So I should never put my function in the eventlistner with the () ?



with the parentheses, the function is called/executed/invoked.

you want to pass the function by reference, so the event can execute your function when the event is triggered.

we can make a simplified of what is happening under the hood:

const mockEventListener = func => {

const funcToExecute = () => {
   console.log('hello world');


normally, mockEventListener would be triggered by the event

1 Like

I get it now.

Thanks guys!!