0

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.

Improve this question
5
  • can you change myFunction()??????? Commented Oct 27, 2014 at 11:23
  • 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. Commented Oct 27, 2014 at 11:25
  • @rajeshkakawat Yeah it does something else at the minute, its just to get a value. Commented Oct 27, 2014 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") ? Commented Oct 27, 2014 at 11:32
  • I added an answer with what i mean Commented Oct 27, 2014 at 11:32

5 Answers 5

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That works perfectly cheers :) Can't believe i didn't think of trying that!
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

Improve this answer

1 Comment

I want it for if it is clicked, not hover, but this is useful. +1.Thankyou :)
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
}
Improve this answer

1 Comment

The other answer was posted before yours so i accepted that one, i appreciate the help though :) +1
1 
<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>
Improve this answer

1 Comment

Would this not change it for all buttons though ?
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/

Improve this answer

6 Comments

This is very useful, thanks :) I will probably move onto toggling the buttons so +1
Also does this use any jquery ?
No, this is just JavaScript
I looked up the toggle function and it looks like it's a jquery addon ?
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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.