Tengo una pregunta con respecto a este código dado: https://stackoverflow.com/a/34404172/11460885 .
Mi situación es que tengo diferentes divs y algunos de ellos deberían tener el borde de color rojo, al hacer clic en ellos y algunos de ellos deberían ser verdes.
¿Cómo podría cambiar el JS, para que pueda tener más de color, según el parámetro?
JS:
function fnChangeBorder(boxId) {document.getElementById(boxId).style.border = "solid #AA00FF";}HTML:
<div class="box" id="A" onclick="fnChangeBorder('A')">Click here !!</div>Muchas gracias a todos.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .green-border { border: green 0px solid; } .red-border { border: red 0px solid; } .show-border { border-width: 1px; } </style> </head> <body> <div class="green-border">Im green</div> <div class="red-border">Im red</div> <div class="green-border">Im green</div> <div class="red-border">Im red</div> </body> <script> document.querySelectorAll(".green-border,.red-border").forEach((div) => { div.addEventListener("click", () => { div.classList.contains("show-border") ? div.classList.remove("show-border") : div.classList.add("show-border"); }); }); </script> </html>Puede crear un segundo parámetro en su función para hacer eso
/*----- Defining Function ------*/ function changeBorder(elementID, colorHex){ /*----- Getting Element & Assign new borders ------*/ document.getElementById(elementID).style.border = "solid "+colorHex; } <!-- Turns Red --> <div class="box" id="A" onclick="changeBorder('A', '#ff0000')">I'll be red</div> <!-- Turns Green --> <div class="box" id="B" onclick="changeBorder('B', '#00ff00')">I'll be green</div>function fnChangeBorder(boxId) { var color = ""; if(boxId === 'A') {color = "solid #AA00FF";} else if(boxId == 'B') {color = "solid black";} document.getElementById(boxId).style.border = color; }Esto es js realmente simple, tal vez debería consultar https://www.w3schools.com/js/js_if_else.asp