I have several red and black buttons and I want to add 'onmousedown' and 'onmouseup' events to the set of red buttons that share the same class ("button red").

onmousedown I want to change add the class "opaque" and onmouseup remove it again.

So onmousedown the red button which has been "selected" goes slightly transparent and onmouseup goes back to normal (red). The other buttons remain unaffected.

css

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px; 
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}

javascript (so far)

var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
   classname[i].addEventListener('onmousedown', classList.add("opaque"), false);
   classname[i].addEventListener('onmouseup', classList.remove("opaque"), false);
}

I have several red and black buttons and I want to add 'onmousedown' and 'onmouseup' events to the set of red buttons that share the same class ("button red").

onmousedown I want to change add the class "opaque" and onmouseup remove it again.

So onmousedown the red button which has been "selected" goes slightly transparent and onmouseup goes back to normal (red). The other buttons remain unaffected.

css

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px; 
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}

javascript (so far)

var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
   classname[i].addEventListener('onmousedown', classList.add("opaque"), false);
   classname[i].addEventListener('onmouseup', classList.remove("opaque"), false);
}

• javascript
• jquery
• css
• addeventlistener

• Wele to Stack Overflow, your question should contain a Minimal, Complete, and Verifiable example. FWIW you can do this with CSS. Is there a reason you're doing it with JS? – hungerstar Commented Feb 8, 2018 at 14:58
• 1 Can you add your HTML – Gerardo BLANCO Commented Feb 8, 2018 at 14:59
• 1 Your selectors are wrong. .button red opaque looks for <opaque> elements (not classes) that are descendants of <red> elements (not classes) that are descendants of elements that use the button class. It should be .button.red.opaque. Same with your .button red selector. – Scott Marcus Commented Feb 8, 2018 at 15:03
• 1 "button red" is not a valid name for a class. getElementsByClassName doesn't support selecting by multiple classNames at once, use querySelectorAll() for that with a proper CSS selector. And .button red opaque means an <opaque> node inside a <red> node inside some node with the class button. You probably mean .button.red.opaque – Thomas Commented Feb 8, 2018 at 15:03
• 2 getElementsByClassName does support multiple classNames: developer.mozilla/en-US/docs/Web/API/Document/… – sliptype Commented Feb 8, 2018 at 15:14

4 Answers 4

You can do this with CSS only.

button {
  padding: 0.5rem 1rem;
  background-color: lightgray;
  border: 1px solid gray;
}

button:active {
  background-color: salmon;
  opacity: 0.5;
}

<button>Click Me!</button>

To address this in JS like you're doing you will need to fix a couple of things.

As mentioned in the ments, there was a type for getElementsByClassName(). I would use querySelectorAll() instead of getElementsByClassName() because it is more flexible in how you can select elements.

classList is a property of a DOM element and cannot be used on its own. Do this element.classList.add( 'class' ), not this classList.add( 'class' ).

Your CSS selectors were incorrect, i.e. .button red opaque will try to select an element with the class .button that contains an element of <red> that has an element of <opaque>.

There might be something wrong with your markup and selectors but I don't have your HTML to verify. I assumed your markup for my example.

var $btns = [].slice.call( document.querySelectorAll( '.button.red' ) );

$btns.map( function ( btn ) {

  btn.addEventListener( 'mousedown', function ( e ) {
    btn.classList.add( 'opaque' );
  } );

  btn.addEventListener( 'mouseup', function ( e ) {
    btn.classList.remove( 'opaque' );
  } );
  
} );

.button {
  padding: 0.5rem 1rem;
  background-color: lightgray;
  border: 1px solid gray;
}

.button.red {
  background-color: indianred;
}

.button.opaque {
  opacity: 0.5;
}

<button class="button red">Click Me!</button>

It is possible to do with css, but here is a solution to add jquery listener on mouse up and mouse down.

$('.button' + '.red').each(function() {
  $(this).mousedown(function() {
    $(this).toggleClass('opaque');
  });
  $(this).mouseup(function() {
    $(this).toggleClass('opaque');
  });
});

.button {
  background-color: black;
  color: white;
  height: 30px;
  width: 150px;
  text-align: center;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

.opaque {
  opacity: 0.7;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button red">Button</button>
<button class="button black">Button</button>

• No iteration (loops) needed
• Wrapped buttons in a <form> tag
• Using HTMLFormControlsCollection API to access buttons
• Used only 2 eventListeners for 20 red buttons mixed with 20 black buttons by using Event Delegation
• CSS animation via transition property

Demo

var form = document.forms.main;

form.addEventListener('mousedown', fade, false);
form.addEventListener('mouseup', fade, false);

function fade(e) {

  if (e.target !== e.currentTarget) {

      e.target.classList.toggle('opq');
  }
}

.btn {
  background-color: black;
  color: white;
  height: 30px;
  width: 50px;
  text-align: center;
  opacity: 1;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease;
}

.red {
  background-color: red;
  transition: all .5s ease
}

.btn.red.opq {
  opacity: 0.7;
  transition: all .5s ease
}

<form id='main'>

  <button class='red btn' type='button'>RED</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='red btn' type='button'>RED</button>
  <button class='btn' type='button'>BLK</button>
  <button class='btn' type='button'>BLK</button>

</form>

var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
  classname[i].addEventListener('mousedown', function () {
    this.classList.add("opaque")
  }, false);
  classname[i].addEventListener('mouseup', function () {
    this.classList.remove("opaque")
  }, false);
}

CSS:

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px;
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}

1. getElementByClassName should be getElementsByClassName
2. You need to pass a function as the second argument of your event listener
3. You need to give context to the classList property
4. The correct names for the events are mousedown and mouseup
5. CSS properties need to end in semicolons
6. CSS selectors are incorrect