Solution 1 :

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

Solution 2 :

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>

Solution 3 :

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>

Solution 4 :

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>

Problem :

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>

Comments

Comment posted by querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript

If you use a class, you should use

By