Change appearance on multiple buttons on focus

Question

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 class="steg1" 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 class="steg2" 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 class="steg3" 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>

Ok, i've gotten it to work to almost perfection, I only need to when step1 is pressed after the other steps, it stays black, how do i put so that "if this is .focused then it should be .colored? here is the updated code.

<button id="step1button" class="step1" onclick="step1Click();">
1 - TECKNA MOBILABONNEMANG
</button>

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

<script>
function step1Click() {
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";
   document.getElementById('step1button').classList.add('focused');
  document.getElementById('step3button').classList.remove('focused');
  
  document.getElementById('step2button').classList.remove('focused');
}
  
</script>

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

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

<script>
function step2Click() {
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";
  document.getElementById('step1button').classList.add('colored');
  document.getElementById('step3button').classList.remove('focused');
  
  document.getElementById('step2button').classList.add('focused');
}
</script>

<button id="step3button" class="step3" onclick="step3Click(); colorchange()">
3 - FÅ RABATT PÅ ELEN
</button>

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

<script>
function step3Click() {
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";

document.getElementById('step1button').classList.add('colored'); 

  document.getElementById('step3button').classList.add('focused');
  
  document.getElementById('step2button').classList.remove('focused');
}

</script>

Fralle · Answer 1 · 2022-10-24T09:52:49.313

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" class="step2" onclick="step2Click()">
  2 - TECKNA ELAVTAL
</button>

<button class="step3" 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";

János Aracsi · Accepted Answer · 2022-10-24T16:19:47.537

0

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 class="steg1" onclick="myFunctionq();" id='steg1' >
1 - TECKNA MOBILABONNEMANG
</button>

For the updated question: You added .colored and .focused, you only really need one of them, so in CSS you should make the initial color of the buttons #CCA200, and then add/remove the .focused class based on which button is clicked:

function step1Click() {
  
  ...
  
  // step1Click should add focus to step1button and remove it from the others
  // Then you just repeat this pattern for step2Click and step3Click.
  document.getElementById('step1button').classList.add('focused');
  document.getElementById('step2button').classList.remove('focused');
  document.getElementById('step3button').classList.remove('focused');
}

#step1button {
  color: #CCA200;
  ...
}

#step2button {
  color: #CCA200;
  ...
}

#step3button {
  color: #CCA200;
  ...
}

.focused {
  color: #223137;
}

edited Oct 24 '22 at 16:19

answered Oct 24 '22 at 09:50

János Aracsi

196
5

There are very few places where `!important` is a good choice, and this really doesn't require it. – DBS Oct 24 '22 at 09:58
I mean you're right, I guess, I'll edit it, but I do usually use it in classes like these that are added/removed in some way. Is there something I'm unaware of that can go horribly wrong? – János Aracsi Oct 24 '22 at 10:11
1

Here's a question with answers that explain it far better than I could in a character-limited comment: [Is it bad to use !important in a CSS property?](https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property) – DBS Oct 24 '22 at 12:13
Added an update, any ideas to how i can fix the final problem? @JánosAracsi – sebnej Oct 24 '22 at 14:14
I updated the answer too. – János Aracsi Oct 24 '22 at 16:21
Thank you! the only thing is that i need "step1" to be .focused from the beginning. so that when i first open the page, step 1 is focused and the other steps are #CCA200, and then the button i press from there on is the only one .focused – sebnej Oct 25 '22 at 06:28
Then just add `.focused` to `.step1` in the html from the beginning. – János Aracsi Oct 25 '22 at 07:06

Change appearance on multiple buttons on focus

2 Answers2