Get element by id through Variable?

Question

I want know how can I pass id by variable is it possible or I have get every button id separately ? Also I want to know how can implement onClick color changing one button at single time rest should have color prop of none.

const btn = document.getElementById('1');

btn.addEventListener('click', function hadleclick() {
  btn.style.background = '#53E247';
})

<form>
  <div><button id="1">1</button></div>
  <div><button id="2">2</button></div>
  <div><button id="3">3</button></div>
  <div><button id="4">4</button></div>
  <div><button id="5">5</button></div>
  <div><button id="6">6</button></div>
  <div><button id="7">7</button></div>
  <div><button id="8">8</button></div>
  <div><button id="9">9</button></div>
  <input type="submit" class="submit" value="Submit" onclick="subFunc()">
</form>

score 0 · Answer 1 · answered Oct 31 '22 at 09:07

Firstly, you didn't add specific class for buttons, and you didn't add forEach loop for catch whole elements. You can change code like this:

<form>
    <div><button id="1" class="changeColor"> 1</button></div>
    <div><button id="2" class="changeColor">2</button></div>
    <div><button id="3" class="changeColor">3</button></div>
    <div><button id="4" class="changeColor">4</button></div>
    <div><button id="5" class="changeColor">5</button></div>
    <div><button id="6" class="changeColor">6</button></div>
    <div><button id="7" class="changeColor">7</button></div>
    <div><button id="8" class="changeColor">8</button></div>
    <div><button id="9" class="changeColor">9</button></div>
    <input type="submit" class="submit" value="Start set color" onclick="subFunc()">
</form>


<script>
    let btn = document.querySelectorAll('.changeColor');

    function subFunc(){
        e = event || window.event;
        e.preventDefault();

        btn.forEach( (it,i) => {
            it.addEventListener('click',function(ev){
                 ev.preventDefault();
                it.style.background = '#53E247';
             });
        })
    }
</script>

If you use a class, you should use `getElementsByClassName` instead of `querySelectorAll` for better performance ([querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript](https://stackoverflow.com/a/54819633/17684809)) — Cédric, Oct 31 '22 at 09:22

score 0 · Accepted Answer · answered Oct 31 '22 at 09:09

This is really just an example, but it will work:

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(){
       buttons[i].style.background = '#53E247';
       for (let j = 0; j < buttons.length; j++) {
           if (buttons[i].id !== buttons[j].id) {
               buttons[j].style.background = "unset";
           }
       }
    });
}

Cédric · Answer 3 · 2022-10-31T09:23:40.110

You can select your buttons (you don't need ids) with :

document.querySelectorAll("form div button").forEach((e) => {});

Or you can use a class applied on buttons :

for (let e of document.getElementsByClassName("yourClass")) {}

Or you can make a single event listener by selecting the parent. In the snippet below, I add or remove the background-color by adding or removing a class :

document.getElementById("container").addEventListener("click", () => {
  if (event.target.tagName == "BUTTON") {
    if (document.querySelector("#container button.bg-green")) {
      document.querySelector("#container button.bg-green").classList.remove("bg-green")
    }
    event.target.classList.add("bg-green")
  }
})

.bg-green {
  background-color: #53E247;
}

<div id="container">
  <div><button>1</button></div>
  <div><button>2</button></div>
  <div><button>3</button></div>
  <div><button>4</button></div>
  <div><button>5</button></div>
  <div><button>6</button></div>
  <div><button>7</button></div>
  <div><button>8</button></div>
  <div><button>9</button></div>
</div>

KooiInc · Answer 4 · 2022-11-01T07:38:30.570

It is generally not a good idea to use inline event handlers.

Use event delegation. The snippet uses a class for the buttons to click and classList.toggle to toggle on clicking them.

document.addEventListener(`click`, handle);

function handle(evt) {
  if ( evt.target.id &&
      !isNaN(+evt.target.id) &&
      evt.target.tagName === `BUTTON` ) {
    return evt.target.classList.toggle(`clicked`);
  }
}

button {
  margin: 3px;
}
button.clicked {
  background-color: #53E247;
}

<div>
  <button id="1">1</button>
  <button id="2">2</button>
  <button id="3">3</button>
</div>
<div>
  <button id="4">4</button>
  <button id="5">5</button>
  <button id="6">6</button>
</div>
<div>
  <button id="7">7</button>
  <button id="8">8</button>
  <button id="9">9</button>
</div>

Get element by id through Variable?

4 Answers4