I've been trying for like an hour to find the right value to do that, and now, only 1 link is highlighted, but i want all the links to get bg's color in yellow, can someone tell me please, what i did or what i am doing wrong? idk how to put more id's in just 1 button without any extra codes...
<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>
Try like following snippet :
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>If you want to perform similar operation on all anchor elements, why not use a className selector instead. For instance
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>Or if you still want to use ids, call the function thrice inside onclick
<button onclick="hl('1'); hl('2'); hl('3')">Highlight</button>
You can use class tag. Class allows to use multiple classes on a single button and the same class on multiple buttons.
You can use the following code to access every button with a class.
document.getElementsByClassName("example");