xxxxxxxxxx
<button id="myButton" class="cssButton">Click me</button>
<script>
// Get the button element
var button = document.getElementById("myButton");
// Add onclick event listener
button.addEventListener("click", function() {
// Perform actions when the button is clicked
alert("Button clicked!");
});
</script>
xxxxxxxxxx
<button id="myButton">Click me</button>
<style>
/* CSS styles for the button */
#myButton {
background-color: blue;
color: white;
padding: 10px;
border: none;
}
/* CSS styles to apply when button is clicked */
#myButton.clicked {
background-color: red;
}
</style>
<script>
// JavaScript code to handle button click event
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
button.classList.toggle('clicked');
// Additional actions to perform on button click
// ...
});
</script>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.clicked {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<button onclick="applyStyles()">Click me!</button>
<script>
function applyStyles() {
var button = document.querySelector('button');
button.classList.toggle('clicked');
}
</script>
</body>
</html>