He estado tratando durante una hora para encontrar el valor correcto para hacer eso, y ahora, solo 1 enlace está resaltado, pero quiero que todos los enlaces tengan el color de bg en amarillo, ¿alguien puede decirme qué hice o qué? ¿que estoy haciendo mal? no sé cómo poner más identificaciones en solo 1 botón sin ningún código adicional...
<script type="text/javascript"> function hl(divId) { var div = document.getElementById(divId); div.className = "highlight"; } function unhl(divId) { var div = document.getElementById(divId); div.className = "1"; } </script> <style type="text/css"> .highlight, .highlight a { background-color: yellow; font-weight: bold; } </style> </head> <body> <div id="thinger"> Visit <a id="1" href="https://instagram.com/">Instagram</p></a> <p>Visit <a id="2" href="https://www.facebook.com/">Facebook</p></a> <p>Visit <a id="3" href="https://discord.gg/">Discord</p></a> </div> <button onclick="hl('1');">Highlight</button> <button onclick="unhl('1');">Unhighlight</button>Prueba como el siguiente fragmento:
const links = document.querySelectorAll('a') const btnHighlight = document.querySelector('#highlight') btnHighlight.addEventListener('click', () => { links.forEach(l => l.classList.toggle('highlight')) links[0].classList.contains('highlight') ? btnHighlight.innerText = 'Unighlight' : btnHighlight.innerText = 'Highlight' }) .highlight, .highlight a { background-color: yellow; font-weight: bold; } <body> <div id="thinger"> <p>Visit <a id="1" href="https://instagram.com/">Instagram</a></p> <p>Visit <a id="2" href="https://www.facebook.com/">Facebook</a></p> <p>Visit <a id="3" href="https://discord.gg/">Discord</a></p> </div> <button id="highlight">Highlight</button>Si desea realizar una operación similar en todos los elementos de anclaje, ¿por qué no usar un selector className en su lugar? Por ejemplo
const links = [...document.getElementsByClassName('link')]; function hl() { links.forEach(link => link.classList.add('highlight')); } function unhl() { links.forEach(link => link.classList.remove('highlight')); } .highlight, .highlight a { background-color: yellow; font-weight: bold; } <div id="thinger"> <p>Visit <a class="link" href="https://instagram.com">Instagram</a></p> <p>Visit <a class="link" href="https://www.facebook.com">Facebook</a></p> <p>Visit <a class="link" href="https://discord.gg">Discord</a></p> </div> <button onclick="hl()">Highlight</button> <button onclick="unhl()">Unhighlight</button> O si aún desea usar ID, llame a la función tres veces dentro de un onclick
<button onclick="hl('1'); hl('2'); hl('3')">Highlight</button>Puedes usar la etiqueta de clase. Class permite usar varias clases en un solo botón y la misma clase en varios botones.
Puede usar el siguiente código para acceder a cada botón con una clase.
document.getElementsByClassName("ejemplo");