Javascript(not jquery) button onclick, function changes class of button calling function

Question

I know you can change the class of a button using

 document.getElementById("ID1").setAttribute("class", "NewClass");

But say i wanted to change the class to active if the button is clicked, is there anyway to do this without assigning an ID to the buttons ?
I also don't want to change all buttons with this class and am aware you can use get element by class as well.

The buttons are generated by another piece of javascript and look like

    <button class="btn" onclick="myFunction(this.innerHTML)">A</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">B</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">C</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">D</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">F</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">G</button>

Any help would be appreciated.
Also if you need any more information just let me know.

Instead of using this.innerHTML just use this then you have access to the button that was clicked instead of of only the text. So then you can do this.setAttribute("class", "NewClass"); in the function. — Brian, Oct 27 '14 at 11:25
@rajeshkakawat Yeah it does something else at the minute, its just to get a value. — , Oct 27 '14 at 11:29
@Brian, would i use `this.setAttribute("class", "NewClass")` in the function, or would i use whatever the variable is. E.g If it was `MyFunction(x)` would i use `x.setAttribute("class", "NewClass")` ? — , Oct 27 '14 at 11:32

score 3 · Accepted Answer · answered Oct 27 '14 at 11:31

3

<button class="btn" onclick="myFunction(this)">A</button>


<script>
function myFunction(button) {
    var text = button.innerHTML;
    // do whatever with text that you were doing before...
    button.setAttribute("class", "active");
}
</script>

answered Oct 27 '14 at 11:31

Brian

903
1
7
13

That works perfectly cheers :) Can't believe i didn't think of trying that! – Oct 27 '14 at 11:40

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

<script type="text/javascript">
    function a(){
        this.classList.toggle('first');
        this.classList.toggle('sec');
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseleave', a )
</script>

from How to toggle class using pure javascript in html

edited May 23 '17 at 12:32

Community

1
1

answered Oct 27 '14 at 11:23

smg628

179
1
5

I want it for if it is clicked, not hover, but this is useful. +1.Thankyou :) – Oct 27 '14 at 11:29

Refilon · Answer 3 · 2014-10-27T11:39:03.183

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Page</title>
        <link rel="stylesheet" type="text/css" src="css/style.css" />

    </head>
<body>
    <button class="btn" onclick="myFunction(this)">A</button>
    <button class="btn" onclick="myFunction(this)">B</button>
    <button class="btn" onclick="myFunction(this)">C</button>
    <button class="btn" onclick="myFunction(this)">D</button>
    <button class="btn" onclick="myFunction(this)">F</button>
    <button class="btn" onclick="myFunction(this)">G</button>

    <script>
                function myFunction(object){
                    object.className = object.className + " btn-active";
                }
        </script>
</body>
</html>

Would this not change it for all buttons though ? – Oct 27 '14 at 11:28 — , Oct 27 '14 at 11:28

score 1 · Answer 4 · answered Oct 27 '14 at 11:33

1

try something like this

html

<button class="btn" onclick="myFunction(this)">A</button>

javascript

function myFunction(btn){
    btn.setAttribute("class", "NewClass");// change class

    btn.innerHTML // use your inner html here
}

answered Oct 27 '14 at 11:33

rajesh kakawat

10,826
1
21
40

The other answer was posted before yours so i accepted that one, i appreciate the help though :) +1 – Oct 27 '14 at 11:47

score 1 · Answer 5 · answered Oct 27 '14 at 11:41

1

This is probably what you want

(function() {
    var buttons = document.getElementsByClassName('btn');
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault();
                this.classList.toggle('active');
            });
        }
    }
})();

You're attaching a click event handler to all the buttons.

http://jsfiddle.net/doiks14/zn6dgn0m/5/

answered Oct 27 '14 at 11:41

andyw_

490
5
15

This is very useful, thanks :) I will probably move onto toggling the buttons so +1 – Oct 27 '14 at 11:45
Also does this use any jquery ? – Oct 27 '14 at 11:50
No, this is just JavaScript – andyw_ Oct 27 '14 at 11:54
I looked up the toggle function and it looks like it's a jquery addon ? – Oct 27 '14 at 11:56
https://developer.mozilla.org/en-US/docs/Web/API/Element.classList - this is a native JavaScript function, although you may want to use polyfill if you want to support older browsers or simply use an alternative way of toggling. – andyw_ Oct 27 '14 at 12:07
Yep looks like the jquery one is different, its just searching anything to do with javascript on google comes up with jquery things and i couldn't find it relating to just javascript. Something similar to the page you linked is what i was looking for though so thanks again, I appreciate the help :) – Oct 27 '14 at 12:19

Javascript(not jquery) button onclick, function changes class of button calling function

5 Answers5