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

Question

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 replacing onclick="hl('1');"'+'onclick="hl('b');" with onclick="hl('1'); hl('b');"? — evolutionxbox
– evolutionxbox, Commented Oct 5, 2021 at 16:27
What would be the point. ID's are unique, you can't make something MORE unique. — Paulie_D
– Paulie_D, Commented Oct 5, 2021 at 16:28
You can't add add multiple id's in 1 button. You can create multiple button instances with different ids. (P.S. <button onclick="hl('1');"'+'onclick="hl('b');"> two onclicks in one button is wrng and causes erreor — ABDULLOKH MUKHAMMADJONOV
– ABDULLOKH MUKHAMMADJONOV, Commented Oct 5, 2021 at 16:28
Yeah, removed that section, i tried the id's with letters, and forgot to remove that part of the code... — Ceban Marian
– Ceban Marian, Commented Oct 5, 2021 at 16:31
I want to assign more ids to 1 single button, not to make 2 clicks in a button... — Ceban Marian
– Ceban Marian, Commented Oct 5, 2021 at 16:32

Nikola Pavicevic · Accepted Answer · 2021-10-05 16:39:00Z

1

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>

edited Oct 5, 2021 at 16:39

answered Oct 5, 2021 at 16:33

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shreevardhan · Accepted Answer · 2021-10-05 17:31:52Z

1

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>

edited Oct 5, 2021 at 17:31

answered Oct 5, 2021 at 16:34

Shreevardhan

12.7k3 gold badges39 silver badges53 bronze badges

1 Comment

Walter Stabosz Over a year ago

Good answer, but based on the code in the question, the OP is quite novice to JS. I suspect your code will be difficult for OP to understand.

Daniel · Accepted Answer · 2021-10-05 16:34:49Z

0

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

answered Oct 5, 2021 at 16:34

Daniel

1,2972 gold badges14 silver badges30 bronze badges

1 Comment

Ceban Marian Over a year ago

Thanks to all of you guys

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related