How do i add add multiple id's in 1 button-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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");