Necesito permitir que solo un botón haga clic a la vez. Como ejemplo, si el usuario hace clic en btn1, su color de fondo cambia de transparente a verde. Luego, si el usuario hace clic en btn2, el color de fondo de btn1 debería cambiar de transparente a rojo, y el color de fondo de btn1 debería cambiar de verde a transparente. Además, necesito un conmutador para ambos botones.
function myFunction(str) { var element = document.getElementById("btn1"); var element1 = document.getElementById("btn2"); if(str==1){ document.getElementById("btn2").style.backgroundColor =""; element.classList.toggle("mystyle"); }else{ element1.classList.toggle("mystyle1"); document.getElementById("btn1").style.backgroundColor =""; } } .mystyle { background-color: green; color: white; } .mystyle1 { background-color: red; color: white; } <button class="" id="btn1" onclick="myFunction(1)">Upvote </button> <button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>Puede usar el element.classList.remove()
function myFunction(str) { var element = document.getElementById("btn1"); var element1 = document.getElementById("btn2"); if(str==1){ element1.classList.remove("mystyle1"); element.classList.toggle("mystyle"); }else{ element1.classList.toggle("mystyle1"); element.classList.remove("mystyle"); } } .mystyle { background-color: green; color: white; } .mystyle1 { background-color: red; color: white; } <button class="" id="btn1" onclick="myFunction(1)">Upvote </button> <button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>Utilizando toggleClass de jQuery, puede escribir una solución limpia para cambiar dinámicamente el color de fondo de los botones.
var btnUp = $('#btn-up'); var btnDown = $('#btn-down'); btnUp.click(function() { $(this).toggleClass('btn-green'); btnDown.removeClass('btn-red'); }); btnDown.click(function() { $(this).toggleClass('btn-red'); btnUp.removeClass('btn-green'); }); .btn { background-color: transparent; } .btn-green { background-color: green; } .btn-red { background-color: red; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="btn-up" class="btn">Up Vote</button> <button id="btn-down" class="btn">Down Vote</button>Después de leer su código, hice algunos cambios en su función js y funcionará según sus expectativas:
function myFunction(str) { var element = document.getElementById("btn1"); var element1 = document.getElementById("btn2"); if(str==1){ element.classList.toggle("mystyle"); element1.className = ''; } else{ element1.classList.toggle("mystyle1"); element.className = ''; } }