Button necessary for eventlistner?

Language Help General Programming
1

Hey

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,

Kr,

Yannick

2

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
3

Hey

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!

kr,

Yannick

1 Like
4

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

5

Hey

this is the part in my html:


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

just before my bodyend you can find:

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

my css rules for this:

#beforefooter{
    background-color: darkslategray;
    text-align: center;
}
#copyh1toseparate{
    font-family: 'Montserrat Subrayada', sans-serif;
    color: whitesmoke;
}

This is the javascript code:



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


//functions
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!

kr,

Yannick

6

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
7

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:
wheel

1 Like
8

You guys are amazing, thank you so much!!

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

kr,

Yannick

9

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 => {
    func();
}

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


mockEventListener(funcToExecute);

normally, mockEventListener would be triggered by the event

1 Like
10

I get it now.

Thanks guys!!