CODEWITHSUNDEEP
javascriptcss
Cain Nuke
Cain Nuke

Reputation: 3093

javascript to switch class of this element and others

Hi,

I have this html code for 2 switch buttons. When you press one the pressed one changes classes so it will look pressed but it will also have the other one change classes too so it will look unpressed. This way there will always be a pressed button and unpressed one.

<span id="but1" class="pressed" onclick="myswitcher(but2);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="myswitcher(but1);">BUTTON 2</span>

This is my javascript

  function myswitcher(elem) {
  if (this.classList.contains("notpressed"))
    elem.classList.add("notpressed");
    elem.classList.remove("pressed");
    this.classList.add("pressed");
    this.classList.remove("notpressed");
}

its not working. Why?

Thank you.

Upvotes: 0

Views: 94

Answers (4)

Naresh Thakur
Naresh Thakur

Reputation: 335

You just need to remove the class for existing pressed button and add to the button which we have just clicked.

It can be achieved simply by core JavaScript as follows: 

function toggleClass(ev){
  var el = document.querySelector(".pressed");
  el.className = 'notpressed';
  ev.target.className = 'pressed';
}
span{
  cursor:pointer;
  padding:10px;
  border:1px solid #FCFCFC;
}
.notpressed{
  background:#CCC;
}
.pressed{
  background: #DFF789;
}
<span id="but1" class="pressed" onclick="toggleClass(event);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="toggleClass(event);">BUTTON 2</span>

Upvotes: 4

jhpratt
jhpratt

Reputation: 7120

Couple things here.

  1. this refers to the function, not any element.
  2. You're not selecting the element by the ID you're passing in.
  3. if statements require braces if there's more than one statement.

Here's your corrected code.

function myswitcher(clicked, other) {
  other = document.getElementById(other); // need to get the element, not just the string

  if (clicked.classList.contains("notpressed")) {
    other.classList.add("notpressed");
    other.classList.remove("pressed");
    clicked.classList.add("pressed");
    clicked.classList.remove("notpressed");
  }
}
.pressed {
  background: green;
}
.notpressed {
  background: red;
}
<span id="but1" class="pressed" onclick="myswitcher(this, 'but2');">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="myswitcher(this, 'but1');">BUTTON 2</span>

(pressed is green, notpressed is red)

this in the HTML refers to the element that is being clicked, while the second parameter is the other element's ID.

Upvotes: 0

brk
brk

Reputation: 50326

switch is reserved keyword in javascript. That cannot be used. Beside there need to change the logic of your implementation.

You can use querySelectorAll to find the button which have the class pressed, then loop through it to remove the class and also you need to pass the context that is this in the function call.

function switchClass(elem) {
 // get the collection of all the elements which have .pressed 
  var getPressed = document.querySelectorAll('.pressed');
  // then remove the class from it 
  if (getPressed.length > 0) {
    for (var i = 0; i < getPressed.length; i++) {
      getPressed[i].classList.remove('pressed')
    }
  }
   // add the class on the element which have triggered the event
  elem.classList.add('pressed');

}
.pressed {
  border: 1px solid red !important;
}

.notpressed {
  border: 1px solid blue;
}
<span id="but1" class="notpressed" onclick="switchClass(this);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="switchClass(this);">BUTTON 2</span>

Upvotes: 0

bobharley
bobharley

Reputation: 702

Here's a code i created.

let buttons = document.querySelectorAll('span');

buttons.forEach((button) => {
	button.addEventListener('click', () => {
  	if (!button.classList.contains('pressed')) {
    	// unpress all pressed button
      let pressed = document.querySelectorAll('span.button.pressed');
      pressed.forEach((p) => {
      	p.classList.remove('pressed');
      })
      // press the clicked button
    	button.classList.add('pressed');
    }
  })
})
span.button {
  cursor: pointer;
  font-family: arial;
  background-color: red;
}

span.button.pressed {
  background-color: #bada55;
}
<span class="button pressed">BUTTON 1</span>
<span class="button" >BUTTON 2</span>
<span class="button">BUTTON 3</span>
<span class="button" >BUTTON 4</span>

Upvotes: 0

Related Questions