Need help with a button on my webpage! It's supposed to change colors from black to pink and then to purple when clicked. However, it's taking two clicks to go from black to pink. Can someone assist in fixing this issue so it changes color on the first click? Also open to suggestions for improvement.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="changeh1"> Clicking the button will change its color <h1>
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function changeStyle() {
//sets variable "button" to connect to HTML ID "buttonStyle"
var button = document.getElementById("buttonStyle"),
click = false;
button.onclick = function() {
click = !click;
//toggles background color back and forth between pink and purple when you click button
button.style.background = click? "#ff0066": "#9933ff";
//toggles text back and forth between "I am now pink!" and "I am now purple!"
document.getElementById('buttonStyle').innerHTML = click? 'I am now pink!': 'I am now purple!';
}
}
let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);
CSS
body{
text-align: center;
font-family: Helvetica;
}
button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}