How to change button colors wth javascript with multiple buttons?

Question

function go(loc) {
    var iframe = document.getElementById("iframe");
    iframe.style.display = "block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
    <title>Foto's</title>
    <link rel="icon" type="image" href="files/icon.png">
    <link rel="stylesheet" href="style.css">
    <script src="files/javascript.js"></script>
</head>
<body>
<br>

<div id="menu1">
    <ul>
        <li><a href="index.html">Welkom</a></li>
        <li><a href="agenda.html">Agenda</a></li>
        <li><a href="fotos.html">Foto's</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<br>

<div id="menu2">
    <ul>
        <li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li>
        <li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li>
        <li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li>
        <li><a onclick="go('camera/2005-2006.html')">2005-2006</a></li>
        <li><a onclick="go('')">2006-2007</a></li>
        <li><a onclick="go('')">2007-2008</a></li>
        <li><a onclick="go('')">2008-2009</a></li>
        <li><a onclick="go('')">2009-2010</a></li>
        <li><a onclick="go('')">2010-2011</a></li>
        <li><a onclick="go('')">2011-2012</a></li>
        <li><a onclick="go('')">2012-2013</a></li>
        <li><a onclick="go('')">2013-2014</a></li>
        <li><a onclick="go('')">2014-2015</a></li>
    </ul>
</div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

I'm trying to make the color of a button lighter when it's clicked without giving eacht button a seperate id. Is there a way to make my javascript find the clicked button so it can change it's color? Also, it should go back to it's original color when no longer active. If there's a solution with html or css, thats fine too.

Thanks.

Alvaro Montoro · Accepted Answer · 2015-03-21 14:18:56Z

I see you are not using jQuery, so I'll stick to a CSS/JavaScript solution without jQuery.

In four easy steps:

Create a CSS style specific for the selected/active button:
```
a.active {
    background-color: #FF0000; 
}
```

Pass the button to the go() function using this:

<a onclick="go('camera/1993-1994.html', this)">1993-1994</a>

And in the JavaScript:

function go(loc, this) {
    var iframe = document.getElementById("iframe");  
    iframe.style.display="block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

Modify the go() function to remove the class active from whatever button is active (if any); and
Add the active class to the button passed as this.

The resulting go() function would look like this:

    function go(loc, obj){
        // if there's an active link, remove the active class
        if (document.querySelector(".active")) {
            document.querySelector(".active").className = document.querySelector(".active").className.replace(" active",""); }
        // add the active class to the current link
        obj.className = obj.className + " active";

        // the rest is the same
        var iframe = document.getElementById("iframe");  
        iframe.style.display="block";
        document.getElementById('iframe').src = loc;
        document.getElementById("p").innerHTML = "";
    }

And the final code would look like this (modified from your original code):

function go(loc, obj){

    // NEW
    if (document.querySelector(".active")) {
        document.querySelector(".active").className = document.querySelector(".active").className.replace(" active",""); 
    }
    obj.className = obj.className + " active";

  var iframe = document.getElementById("iframe");  
  iframe.style.display="block";
  document.getElementById('iframe').src = loc;
  document.getElementById("p").innerHTML = "";
}

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

/** NEW **/
a.active { background-color: red !important; }

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
<title>Foto's</title>
<link rel="icon" type="image" href="files/icon.png">
<link rel="stylesheet" href="style.css">
<script src="files/javascript.js"></script>
</head>
<body>
<br>
<div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<br>
<div id="menu2"><ul><li><a onclick="go('camera/1993-1994.html',this)">1993-1994</a></li><li><a onclick="go('camera/1994-2003.html',this)">1994-2003</a></li><li><a onclick="go('camera/2003-2004.html',this)">2003-2004</a></li><li><a onclick="go('camera/2005-2006.html',this)">2005-2006</a></li><li><a onclick="go('',this)">2006-2007</a></li><li><a onclick="go('',this)">2007-2008</a></li><li><a onclick="go('',this)">2008-2009</a></li><li><a onclick="go('',this)">2009-2010</a></li><li><a onclick="go('',this)">2010-2011</a></li><li><a onclick="go('',this)">2011-2012</a></li><li><a onclick="go('',this)">2012-2013</a></li><li><a onclick="go('',this)">2013-2014</a></li><li><a onclick="go('',this)">2014-2015</a></li></ul></div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

Thank you so much! This really helped me. Also, I've learned about this .

Alex · Accepted Answer · 2015-03-21 13:50:10Z

0

In this case, I prefer .each jQuery function; But If you want to write pure-JS, you have to get an array of button elements using getElementsByClassName() function.

answered Mar 21, 2015 at 13:50

Alex

1,6541 gold badge26 silver badges49 bronze badges

1 Comment

HYBR1D Over a year ago

Could you give me an example of that?

Rick Hitchcock · Accepted Answer · 2015-03-21 14:38:07Z

This adds a click handler to all li a elements, which restores the background of all li a elements, then sets the style of the clicked element to be a different color.

It's in a closure, so the a collection is a private variable.

(function() {
  var a= document.querySelectorAll('li a');

  [].forEach.call(a, function(el) {
    el.addEventListener('click', function() {
      [].forEach.call(a, function(el) {
        el.style.background= '';
      });
      this.style.background= '#88f';
    });
  });
})();

function go(loc) {
    var iframe = document.getElementById("iframe");
    iframe.style.display = "block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

(function() {
  var a= document.querySelectorAll('li a');

  [].forEach.call(a, function(el) {
    el.addEventListener('click', function() {
      [].forEach.call(a, function(el) {
        el.style.background= '';
      });
      this.style.background= '#88f';
    });
  });
})();

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
    <title>Foto's</title>
    <link rel="icon" type="image" href="files/icon.png">
    <link rel="stylesheet" href="style.css">
    <script src="files/javascript.js"></script>
</head>
<body>
<br>

<div id="menu1">
    <ul>
        <li><a href="index.html">Welkom</a></li>
        <li><a href="agenda.html">Agenda</a></li>
        <li><a href="fotos.html">Foto's</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<br>

<div id="menu2">
    <ul>
        <li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li>
        <li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li>
        <li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li>
        <li><a onclick="go('camera/2005-2006.html')">2005-2006</a></li>
        <li><a onclick="go('')">2006-2007</a></li>
        <li><a onclick="go('')">2007-2008</a></li>
        <li><a onclick="go('')">2008-2009</a></li>
        <li><a onclick="go('')">2009-2010</a></li>
        <li><a onclick="go('')">2010-2011</a></li>
        <li><a onclick="go('')">2011-2012</a></li>
        <li><a onclick="go('')">2012-2013</a></li>
        <li><a onclick="go('')">2013-2014</a></li>
        <li><a onclick="go('')">2014-2015</a></li>
    </ul>
</div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

Here's the jQuery equivalent:

$('li a').click(function() {
  $('li a').css('background', '');
  $(this).css('background', '#88f');
});

Collectives™ on Stack Overflow

How to change button colors wth javascript with multiple buttons?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related