Aquí tengo este código que usé para crear dos botones para cambiar el color (púrpura) y el otro para volver a cambiarlo al color predeterminado (negro). Pero quiero crear solo un botón que haga ambas cosas, cambiar el color y luego volver al color predeterminado, en este caso negro. ¿Cómo puedo hacer eso? ¡Gracias!
<body> <h1>Welcome to my first Web App!</h1> <p>This web app will change the color of the text below:</p> <h3 id="color-change">My color will change!</h3> <button onclick="changeColor()">Change color</button> <button onclick="defaultColor()">Default color</button> <script !src=""> function changeColor(){ var element = document.getElementById("color-change"); element.className = "myClass"; } function defaultColor(){ var element = document.getElementById("color-change"); element.className = "defaultCol"; } </script> </body>Puede usar .toggle() para alternar la clase al hacer clic en el botón. Lo que hacemos es obtener la lista de classList del elemento y alternar myClass en cada clic
var element = document.getElementById("color-change"); element.classList.toggle('myClass'); function changeColor() { var element = document.getElementById("color-change"); element.classList.toggle('myClass') } .myClass { color: red; } <h1>Welcome to my first Web App!</h1> <p>This web app will change the color of the text below:</p> <h3 id="color-change">My color will change!</h3> <button onclick="changeColor()">Toggle color</button>