I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected.
If anyone has any insights or suggestions on how to fix this issue, I would greatly appreciate it.
<html>
<head>
<script type="text/javascript">
var element = document.getElementsByName('color');
if (element[0].checked) {
$("p").toggleClass("blue");
} else {
$("p").toggleClass("red");
}
</script>
<style type="text/css">
.blue {
color: blue;
}
.red {
color: red;
}
</style>
</head>
<body>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>