Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style type="text/css"> body { text-align: center; } .oldClassName { background-color: green; } .newClassName { background-color: blue; } .pId { margin-top: 30px; } #buttonId { padding: 15px; } </style> </head> <body> <h2>Chenge class name</h2> <button class="oldClassName" id="buttonId" onclick="changeClass()">Click on Button</button> <br> <p id="pId">Old class name: oldClassName </p> <script type="text/javascript"> function changeClass() { document.getElementById('buttonId').className = "newClassName"; let button_class = document.getElementById('buttonId').className; document.getElementById('pId').innerHTML = "New class name: " + button_class; } </script> </body> </html>