Vanilla Javascript - How can I use mouseup and mousedown on the same button to change and revert a css class value?

Question

I'm a beginner learning to work with vanilla javascript. I have been searching for 2 days, and posting questions in a couple of javascript facebook groups since last night, and I haven't found a solution yet. Maybe I'm not asking the question correctly in my search, but I'm just stuck. If, for some reason, I am bringing up a question that has been answered, I apologize. In my defense, being a beginner sometimes means we are not sure exactly how to search for the answers. Moving on...

I am trying to figure out how to use 2 eventListeners for the same button to change a css property value. I want function1 to run on mousedown and function2 to run on mouseup . I think my problem is occurring with the (event) parameter. Is there a way to make sure the event parameter in function1 is targeting only the event for mousedown ? Then point the event in function2 to use the event for mouseup ? This is what I have so far... html

<button class="my-btn">My button</button>
<div class="my-class">
some content
</div>

Javascript

let myBtn = document.querySelector('.my-btn');
let myClass = document.querySelector('.my-class');
myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);

function function1(event){
    myClass.style.bottom = "-16em";
}

function function2(event){
    myClass.style.bottom = "0";
}

Answer 1

Good that you have started to work on Js.

I have created a playground which changes the background color on mouseup and mousedown event. Please visit the below link for the same.

https://jsfiddle.net/kqydbwhL/

Also, I feel like in your code.

myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);

myBtn should be replaced with myClass because you are storing the element into myClass but while listening to the events you are targeting myBtn which is undefined .

Thanks.

---

I think you updated your code snippet in the problem description. Here is the new playground url having those changes.

https://jsfiddle.net/6pzhjvfL/17/

Answer 2

After looking at your pen, it seems that position property should be set differently in my-class . Bottom property does not work with static position, which is a default position of all elements.

Maybe you can learn more about bottom property here .

Take a look at this example . I added position:relative to my-class . Try it with position:absolute if that is the result you wanted.

Answer 3

After reviewing the responses here, it was pointed out to me that my code actually works the way I want it to. So I went back to my original project to review. I discovered that I had function2 nested inside `function1' which was not intended. A misplaced curly bracket way down at the bottom of my file, completely out of sight, was the problem. I wasted 2 days looking for an answer to a problem that ended up being a syntax error of my own doing.

Thank you all for your help. I will be careful in the future to keep this from happening again.