CODEWITHSUNDEEP
javascriptfunctioneventsclick
pjk_ok
pjk_ok

Reputation: 967

Toggle Individual Functions When an Event is Clicked - Javascript

I'd like to call a function that toggles on a node list of elements with the same class. I basically need to add the function within the if else statement, but the different variants of this seem to throw an error. When I put the code that is inside the two functions directly into the if else statement it works, but I want to do it with functions because this is a simplified version of what will be more complex style changes.

Codepen is here:https://codepen.io/emilychews/pen/GEEpqW?editors=1111

Code is below:

JS 

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

function newColor() {
  e.currentTarget.style.background = "black";
}

function originalColor() {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h +=1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.backgroundColor === "red") {
      newColor();
    } else {
      originalColor();
    }
  });
}

CSS

* {font-family: arial;}

.desktopmenubutton {
  width: 150px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

.button2 {
  left: 300px;
}

HTML

<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

Upvotes: 0

Views: 104

Answers (3)

Pv-Viana
Pv-Viana

Reputation: 642

Pass the element in the function that is inside the if statement.

 var $mainMenuButton = document.getElementsByClassName('desktopmenubutton button1');

    function newColor(element) {
      element.currentTarget.style.backgroundColor = "black";
    }

    function originalColor(element) {
      element.currentTarget.style.backgroundColor = "red";
    }

    for (h = 0; h < $mainMenuButton.length; h +=1) {
      $mainMenuButton[h].addEventListener('click', function(e) {
        if (e.currentTarget.style.backgroundColor === "red") {
          newColor(e);
        } else {
          originalColor(e);
        }
      });
    }

Upvotes: 2

Rayon
Rayon

Reputation: 36609

You are not passing e(event) argument

Also note that Element.style.* reads inline css styles, not those styles which are assigned in CSS file/tag.

You could set red color initially in loop so that it could be accessed using Element.style.* property.

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

function newColor(e) {
  e.currentTarget.style.background = "black";
}

function originalColor(e) {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h += 1) {
  $mainMenuButton[h].style.background = 'red';
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.background == 'red') {
      newColor(e);
    } else {
      originalColor(e);
    }
  });
}
* {
  font-family: arial;
}

.desktopmenubutton {
  width: 150px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

.button2 {
  left: 300px;
}
<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

Upvotes: 0

mariodiniz
mariodiniz

Reputation: 102

You forget to receive the event as a parameter on newColor and originalColor.

var $mainMenuButton = 
document.getElementsByClassName('desktopmenubutton');

function newColor(e) {
  e.currentTarget.style.background = "black";
}

function originalColor(e) {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h +=1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.backgroundColor === "red") {
      newColor(e);
    } else {
      originalColor(e);
    }
  });
}

This should work.

Upvotes: 0

Related Questions