CODEWITHSUNDEEP
javascripthtmlcss
xlaas
xlaas

Reputation: 29

Changing Color Of Multible Buttons

Ive got an Set of Buttons that should change the color when pressed. I tried it with getelementybyclassname but when i press a differnt button the color changes for all buttons. My goal is to make some sort of Selector where you can choose your criteria and depending on the criteria a final result will be shown

function changecolor(){
  var elements = document.getElementsByClassName("button")[0].style.color="blue";
  }
<h2><span class="primary-text">Choose </span>your criteria</h2>
          <button class="button"type="button" id="lightframe" onclick="changecolor()">easy to handle</button>
          <button class="button"type="button" id="outdoor" onclick="changecolor()">small</button>
          <button class="button"type="button" id="smallsize" onclick="changecolor">cheap</button>

Upvotes: 1

Views: 78

Answers (3)

Gempron
Gempron

Reputation: 74

You can just pass the button to the function

function changecolor(button){
  button.style.color = "blue";
  }
<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" onclick="changecolor(this)">easy to handle</button>
      <button type="button" onclick="changecolor(this)">small</button>
      <button type="button" onclick="changecolor(this)">cheap</button>

Or like this

function changecolor(){
  this.style.color = "blue";
  }
<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" onclick="changecolor.apply(this)">easy to handle</button>
      <button type="button" onclick="changecolor.apply(this)">small</button>
      <button type="button" onclick="changecolor.apply(this)">cheap</button>

EDIT:

If you want to trigger color of your buttons I would highly recommend using css instead of manipulating on style attribute. jQuery will be very handy for this

$(".button").on("click", function () {
	if($(this).hasClass("active")) {
  	$(this).removeClass("active");
  }
  else {
  	$(this).addClass("active");
  }
});
.active {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button type="button" class="button">easy to handle</button>
      <button type="button" class="button">small</button>
      <button type="button" class="button">cheap</button>

Upvotes: 2

Daniel Bailey
Daniel Bailey

Reputation: 115

You should try jQuery

<h2><span class="primary-text">Choose </span>your criteria</h2>
      <button class="button" type="button" id="lightframe">easy to handle</button>
      <button class="button" type="button" id="outdoor">small</button>
      <button class="button" type="button" id="smallsize">cheap</button>



//This code will only change the one that is selected

    $('.button').click(function() {
      $(this).css("color", "blue");
    });

Upvotes: 1

Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

Try this:

function changecolor(idElement){
  var elements = document.getElementById(idElement).style.color="blue";
  }
<h2><span class="primary-text">Choose </span>your criteria</h2>
          <button class="button"type="button" id="lightframe" onclick="changecolor('lightframe')">easy to handle</button>
          <button class="button"type="button" id="outdoor" onclick="changecolor('outdoor')">small</button>
          <button class="button"type="button" id="smallsize" onclick="changecolor('smallsize')">cheap</button>

Upvotes: 1

Related Questions