Change appearance on multiple buttons on focus-CodePudding

I have this part of my site where i'm using javascript to show and hide a div when clicked, so far so good, my problem is i want the color of the button to change when clicked, so that the color in ".steg1" changes to #CCA200 when i click ".steg2".

I have tried focus, but I have more places on the same page where I need to use this so I'm looking for a different solution. I've tried some jquery with no luck, is this doable in javascript?

here is the code:

<button  onclick="myFunctionq();">
1 - TECKNA MOBILABONNEMANG
</button>

<style>
  .steg1 {
    font-family: 'mark-heavy';
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-bottom: solid 5px;
    color: #223137;
    padding: 0 40px;
  }
</style>

<script>
  function myFunctionq() {
    var x =
      document.getElementById("tecknamobil");
    var y =
      document.getElementById("tecknael");
    var z =
      document.getElementById("rabatt");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
    y.style.display = "none";
    z.style.display = "none";
  }
</script>

<button  onclick="myFunctionp()">
2 - TECKNA ELAVTAL
</button>

<style>
  .steg2 {
    font-family: 'mark-heavy';
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-bottom: solid 5px;
    padding: 0 60px;
    color: #CCA200;
  }
</style>

<script>
  function myFunctionp() {
    var x =
      document.getElementById("tecknael");
    var y =
      document.getElementById("tecknamobil");
    var z =
      document.getElementById("rabatt");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
    y.style.display = "none";
    z.style.display = "none";
  }
</script>

<button  onclick="myFunctionr(); buttonColorb()">
3 - FÅ RABATT PÅ ELEN
</button>

<style>
  .steg3 {
    font-family: 'mark-heavy';
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-bottom: solid 5px;
    padding: 0 50px;
    color: #CCA200;
  }
</style>

<script>
  function myFunctionr() {
    var x =
      document.getElementById("rabatt");
    var y =
      document.getElementById("tecknael");
    var z =
      document.getElementById("tecknamobil");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
    y.style.display = "none";
    z.style.display = "none";
  }
</script>

Where can I add the code that changes the class for the buttons on click?

CodePudding user response：

First of all, we should rename your functions to be more specific. Also, I would recommend writing everything code related in English rather than Swedish.

So this will be the HTML markup.

<button id="step2button"  onclick="step2Click()">
  2 - TECKNA ELAVTAL
</button>

<button  onclick="step3Click()">
  3 - FÅ RABATT PÅ ELEN
</button>

You will need to adjust CSS to match the new classes step instead of steg.

And for the JavaScript, rename the functions to match the new names in the markup. And add the following line to step3Clicked.

var step2button = document.getElementById("step2button");
step2button.display.backgroundColor = "#CCA200";

CodePudding user response：

The way I usually handle things like this is create another class let's say .colored which has color: #CCA200 in it, then add/remove/toggle the class from the element whenever you want, this way you can add it to more than one element as well if needed, so you don't have to rewrite it every time.

// When ".steg2" is clicked
function myFunctionp() {
  document.getElementById('steg1').classList.toggle('colored');
}

.colored {
  color: #CCA200;
}

<!-- Added an id to find it easier -->
<button  onclick="myFunctionq();" id='steg1' >
1 - TECKNA MOBILABONNEMANG
</button>