En un formulario tengo un botón del que quiero cambiar el color cada vez que el usuario lo pulse. Hice esto, pero al pulsar el botón, el estilo no cambia y sigue como btn-success
.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#boton').click(function () {
var clase = $('#boton').attr('class');
if (clase.includes('btn-success')) {
$('#boton').removeClass('btn-success');
$('#boton').addClass('btn-danger');
} else {
$('#boton').removeClass('btn-danger');
$('#boton').addClass('btn-success');
}
});
</script>
</head>
<body>
<main role="main" class="container">
<div class="starter-template">
<div id="contenedorfh">
<div id="fecha"></div>
<br>
<div id="hora"></div>
<form style="text-align: center; margin-top:10%;" name="formulario" method="post" action="">
<input style="text-align: center;" type="datetime" name="fechahora" step="1" value="<?php echo date("d/m/Y H:i:s");?>">
<br>
<br>
<input id="boton" type="submit" name="picar" class="btn btn-success" value="Time">
</form>
</div>
</div>
</main>
</body>
Puede que esté poniendo mal la ubicación de mi código jquery. ¿Alguna ayuda?